three.js dev template - module
HTML
<div id='container'>
</div>
CSS
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
JavaScript
import * as THREE from "https://rawgit.com/mrdoob/three.js/dev/build/three.module.js";
import { OrbitControls } from 'https://rawgit.com/mrdoob/three.js/dev/examples/jsm/controls/OrbitControls.js';
var renderer, stats, scene, camera, gui, guiData;
var circle, clock;
init();
animate(0);
//
function init() {
var container = document.getElementById( 'container' );
//
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 0, 200 );
clock = new THREE.Clock();
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
//
var controls = new OrbitControls( camera, renderer.domElement );
controls.screenSpacePanning = true;
//
//
window.addEventListener( 'resize', onWindowResize, false );
//
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xb0b0b0 );
//
var helper = new THREE.GridHelper( 160, 10 );
helper.rotation.x = Math.PI / 2;
scene.add( helper );
const geometry = new THREE.CircleBufferGeometry( 5, 32 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
circle = new THREE.Mesh( geometry, material );
console.log(circle.geometry.getAttribute('position'));
for (let i = 1; i < circle.geometry.getAttribute('position').array.length; i+=3) {
circle.geometry.getAttribute('position').array[i] -= 10;
}
// circle.position.set(0, -10, 0);
circle.updateMatrixWorld();
scene.add( circle );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
const t = clock.getElapsedTime();
let start = new THREE.Vector3(0,-10,0);
let end = new...