佛山专业的网站制作,襄州区住房和城乡建设局网站,iis 网站制作,做数据库与网站招什么人基础模板代码 使用须知常规模板代码常规Shader模板代码 使用须知
本模板代码#xff0c;主要用于编写Threejs的Demo#xff0c;因为本人在早期学习的过程中#xff0c;大量抄写Threejs/examples下的代码以及各个demo站的代码#xff0c;所以养成了编写Threejs的demo的习惯… 基础模板代码 使用须知常规模板代码常规Shader模板代码 使用须知
本模板代码主要用于编写Threejs的Demo因为本人在早期学习的过程中大量抄写Threejs/examples下的代码以及各个demo站的代码所以养成了编写Threejs的demo的习惯编写时一般是直接复制一份模板代码直接编写即可模板代码环境首先你要在指定的路径上有Threejs的开发包的存在如下图所示本人将threejs开发包改名后与所有的demo代码放在同一个文件夹下模板代码只需要确定引入的文件路径正确即可至于文件怎么摆放需不需要webpack环境nodenpm环境之类的无所谓因为本人使用webstorm所以在运行html的时候直接就可以运行webstorm内置了服务器不需要额外单独跑服务器就可以运行Threejs版本建议在160以上
常规模板代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylebody{width:100vw;height: 100vh;overflow: hidden;margin: 0;padding: 0;border: 0;}/style
/head
bodyscript typeimportmap{imports: {three: ../three/build/three.module.js,three/addons/: ../three/examples/jsm/}}/scriptscript typemoduleimport * 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
常规Shader模板代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylebody{width:100vw;height: 100vh;overflow: hidden;margin: 0;padding: 0;border: 0;}/style
/head
bodyscript typeimportmap{imports: {three: ../three/build/three.module.js,three/addons/: ../three/examples/jsm/}}/scriptscript typex-shader/x-vertex idvertexShadervarying 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
script typex-shader/x-fragment idfragmentShadervarying vec2 vUv;void main(){gl_FragColor vec4(1.0,0.0,0.0,1.0);}
/scriptscript typemoduleimport * 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
