Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
The 'three' npm package is a JavaScript library that provides a wide array of functionalities for creating and displaying 3D graphics in web browsers. It uses WebGL under the hood and provides an easy-to-use API to create 3D scenes, render them, and add various elements like shapes, materials, lights, cameras, and more.
Creating a Scene
This code sample demonstrates how to create a new 3D scene using Three.js. A scene is a container that holds all your objects, cameras, and lights.
const scene = new THREE.Scene();
Adding a Mesh
This code sample shows how to create a simple cube mesh with a green color and add it to the scene. A mesh consists of a geometry and a material.
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
Setting up a Camera
This code sets up a perspective camera with a certain field of view, aspect ratio, and near and far clipping planes. The camera is positioned 5 units away from the origin along the z-axis.
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
Rendering the Scene
This code sample initializes a WebGL renderer, sets its size, and appends its DOM element to the body of the document. It also defines an animate function that continuously renders the scene using the camera.
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
Adding Lights
This code sample adds a point light to the scene, which emits light in all directions. The light's color, intensity, and distance are set, and its position is placed at coordinates (10, 10, 10).
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(10, 10, 10);
scene.add(light);
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework. Similar to Three.js, it allows developers to create 3D content for the web. Babylon.js has a different API and additional features like a physics engine and advanced particle systems.
PlayCanvas is an open-source 3D engine/IDE that is specifically designed for the web. It offers real-time collaboration features and is more focused on game development. It provides an editor for building 3D applications and has a different approach to workflow compared to Three.js.
A-Frame is a web framework for building virtual reality (VR) experiences. It is built on top of Three.js and abstracts away the complexity of Three.js with a declarative HTML-like syntax. A-Frame is designed for creating VR experiences and is more accessible for web developers who are familiar with HTML and JavaScript.
The aim of the project is to create an easy to use, lightweight, 3D library with a default WebGL renderer. The library also provides Canvas 2D, SVG and CSS3D renderers in the examples.
Examples — Documentation — Wiki — Migrating — Questions — Forum — Gitter — Slack
Download the minified library and include it in your HTML, or install and import it as a module, Alternatively, see how to build the library yourself.
<script src="js/three.min.js"></script>
This code creates a scene, a camera, and a geometric cube, and it adds the cube to the scene. It then creates a WebGL
renderer for the scene and camera, and it adds that viewport to the document.body
element. Finally, it animates the cube within the scene for the camera.
var camera, scene, renderer;
var geometry, material, mesh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
scene = new THREE.Scene();
geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render( scene, camera );
}
If everything went well you should see this.
FAQs
JavaScript 3D library
The npm package three receives a total of 702,289 weekly downloads. As such, three popularity was classified as popular.
We found that three demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.