本模板代码，主要用于编写Threejs的Demo ，因为本人在早期学习的过程中，大量抄写Threejs/examples下的代码以及各个demo站的代码，所以养成了编写Threejs的demo的习惯，编写时，一般是直接复制一份模板代码，直接编写即可 模板代码环境：首先你要在指定的路径上有Threejs的开发包的存在，如下图所示，本人将threejs开发包改名后，与所有的demo代码放在同一个文件夹下，模板代码只需要确定引入的文件路径正确即可，至于文件怎么摆放，需不需要webpack环境，node，npm环境之类的无所谓 因为本人使用webstorm，所以在运行html的时候，直接就可以运行，webstorm内置了服务器，不需要额外单独跑服务器就可以运行 Threejs版本建议在160 以上 <! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < style> body { width : 100vw; height : 100vh; overflow : hidden; margin : 0; padding : 0; border : 0; } </ style> </ head> < body> < scripttype = " importmap" > { "imports" : { "three" : "../three/build/three.module.js" , "three/addons/" : "../three/examples/jsm/" } } </ script> < scripttype = " module" > import * as THREE from "../three/build/three.module.js" ; import { OrbitControls} from "../three/examples/jsm/controls/OrbitControls.js" ; window. addEventListener ( 'load' , e => { init ( ) ; addMesh ( ) ; render ( ) ; } ) let scene, renderer, camera, orbit; function init ( ) { scene = new THREE. Scene ( ) ; renderer = new THREE. WebGLRenderer ( { alpha : true , antialias : true } ) ; renderer. setSize ( window. innerWidth, window. innerHeight) ; document. body. appendChild ( renderer. domElement) ; camera = new THREE. PerspectiveCamera ( 50 , window. innerWidth/ window. innerHeight, 0.1 , 2000 ) ; camera. add ( new THREE. PointLight ( 0xffffff , 1 , 1000 , 0.01 ) ) ; camera. position. set ( 10 , 10 , 10 ) ; scene. add ( camera) ; orbit = new OrbitControls ( camera, renderer. domElement) ; orbit. enableDamping = true ; scene. add ( new THREE. GridHelper ( 10 , 10 ) ) ; } function addMesh ( ) { let geometry = new THREE. BoxGeometry ( 1 , 1 , 1 ) ; let material = new THREE. MeshStandardMaterial ( { color : 0xffffff * Math. random ( ) } ) ; let mesh = new THREE. Mesh ( geometry, material) ; scene. add ( mesh) ; } function render ( ) { renderer. render ( scene, camera) ; orbit. update ( ) ; requestAnimationFrame ( render) ; } </ script> </ body> </ html> <! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < style> body { width : 100vw; height : 100vh; overflow : hidden; margin : 0; padding : 0; border : 0; } </ style> </ head> < body> < scripttype = " importmap" > { "imports" : { "three" : "../three/build/three.module.js" , "three/addons/" : "../three/examples/jsm/" } } </ script> < scripttype = " x-shader/x-vertex" id = " vertexShader" > varying vec2 vUv; void main ( ) { vUv = vec2 ( uv. x, uv. y) ; vec4 mvPosition = modelViewMatrix * vec4 ( position, 1.0 ) ; gl_Position = projectionMatrix * mvPosition; gl_Position = projectionMatrix * modelMatrix * viewMatrix * vec4 ( position, 1.0 ) ; } </ script> < scripttype = " x-shader/x-fragment" id = " fragmentShader" > varying vec2 vUv; void main ( ) { gl_FragColor = vec4 ( 1.0 , 0.0 , 0.0 , 1.0 ) ; }
</ script> < scripttype = " module" > import * as THREE from "../three/build/three.module.js" ; import { OrbitControls} from "../three/examples/jsm/controls/OrbitControls.js" ; window. addEventListener ( 'load' , e => { init ( ) ; addMesh ( ) ; render ( ) ; } ) let scene, renderer, camera; let orbit; function init ( ) { scene = new THREE. Scene ( ) ; renderer = new THREE. WebGLRenderer ( { alpha : true , antialias : true } ) ; renderer. setSize ( window. innerWidth, window. innerHeight) ; document. body. appendChild ( renderer. domElement) ; camera = new THREE. PerspectiveCamera ( 50 , window. innerWidth/ window. innerHeight, 0.1 , 2000 ) ; camera. add ( new THREE. PointLight ( ) ) ; camera. position. set ( 15 , 15 , 15 ) ; scene. add ( camera) ; orbit = new OrbitControls ( camera, renderer. domElement) ; orbit. enableDamping = true ; scene. add ( new THREE. GridHelper ( 10 , 10 ) ) ; } let uniforms = { } function addMesh ( ) { let geometry = new THREE. PlaneGeometry ( 10 , 10 ) ; let material = new THREE. ShaderMaterial ( { uniforms, vertexShader : document. getElementById ( 'vertexShader' ) . textContent, fragmentShader : document. getElementById ( 'fragmentShader' ) . textContent, } ) let mesh = new THREE. Mesh ( geometry, material) ; scene. add ( mesh) ; } function render ( ) { renderer. render ( scene, camera) ; orbit. update ( ) ; requestAnimationFrame ( render) ; } </ script> </ body> </ html> 
