three.js dev template - module
CSS
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
JavaScript
// Simple three.js example
import * as THREE from "https://threejs.org/build/three.module.js";
import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
var mesh, renderer, scene, camera, controls;
init();
animate();
function init() {
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );
// scene
scene = new THREE.Scene();
scene.background = new THREE.Color(0xa7b2aa);
// camera
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 20, 20, 20 );
// controls
controls = new OrbitControls( camera, renderer.domElement );
var TopLight = new THREE.PointLight(0xaaaaaa, 1, 0, 0);
camera.add(TopLight);
scene.add(camera);
// ambient
scene.add(new THREE.AmbientLight(0xffffff, .4));
// light
// var light = new THREE.DirectionalLight( 0xffffff, 1 );
// light.position.set( 20,20, 0 );
// scene.add( light );
// axes
//scene.add( new THREE.AxesHelper( 20 ) );
// geometry
var geometry = new THREE.PlaneBufferGeometry( 10, 10, 10,10 );
geometry.dynamic = true;
geometry.positionsNeedUpdate = true;
var positions = geometry.attributes.position.array.slice();
var colors = new Float32Array(geometry.attributes.position.array.length).fill(undefined);
var color = new THREE.Color();
color.setHex('0x696969');
for(var i = 0;i<geometry.attributes.position.array.length;i+=3){
positions[i + 2] = Math.floor(Math.random() * 3) + 1 ;
colors[i + 0] = color.r;
colors[i + 1] = color.g;
colors[i + 2] = color.b;
}
positions[140 + 2] = undefined;
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
...