Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

three

Package Overview
Dependencies
Maintainers
2
Versions
292
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

three

JavaScript 3D library

  • 0.171.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1.5M
increased by0.7%
Maintainers
2
Weekly downloads
 
Created

What is three?

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.

What are three's main functionalities?

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);

Other packages similar to three

Keywords

FAQs

Package last updated on 29 Nov 2024

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc