three.js-畫一個點/粒子
阿新 • • 發佈：2019-02-10
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Three框架</title> <script src="Three.js" data-ke-src="Three.js"></script> <style type="text/css"> div#canvas-frame { border: none; cursor: pointer; width: 100%; height: 600px; background-color: #EEEEEE; } </style> <script> var renderer; function initThree() { width = document.getElementById('canvas-frame').clientWidth; height = document.getElementById('canvas-frame').clientHeight; renderer = new THREE.WebGLRenderer({ antialias : true }); renderer.setSize(width, height); document.getElementById('canvas-frame').appendChild(renderer.domElement); renderer.setClearColor(0xFFFFFF, 1.0); } var camera; function initCamera() { camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000); camera.position.x = 0; camera.position.y = 100; camera.position.z = 0; camera.up.x = 0; camera.up.y = 0; camera.up.z = 1; camera.lookAt({ x : 0, y : 0, z : 0 }); } var scene; function initScene() { scene = new THREE.Scene(); } var light; function initLight() { light = new THREE.DirectionalLight(0xFF0000, 1.0, 0); light.position.set(100, 100, 200); scene.add(light); } var cube; function initObject() { //因Three.js沒有 // 建立粒子geometry var geom = new THREE.Geometry(); var material = new THREE.ParticleBasicMaterial({ color: 0x00FFFF, size: 1 }); // 建立單個粒子 var color1 = new THREE.Color( 0x0000ff ); var p1 = new THREE.Vector3( 0, 0, 0 ); // 將粒子加入粒子geometry geom.vertices.push(p1); geom.colors.push(color1); // 建立粒子系統 var system = new THREE.ParticleSystem(geom, material); // 將粒子系統加入場景 scene.add(system); } function render() { renderer.clear(); renderer.render(scene, camera); requestAnimationFrame(render); } function threeStart() { initThree(); initCamera(); initScene(); initLight(); initObject(); render(); } </script> </head> <body onload="threeStart();"> <div id="canvas-frame"></div> </body> </html>