Vue three.js基础四大组件实现三维效果（三）贴图/镜头移动/地板
//未贴图 let material = new THREE.MeshPhongMaterial({color："#f60"}) //贴图 const loader = new THREE.TextureLoader()//贴图 let material = new THREE.MeshPhongMaterial({ map: loader.load('https://threejsfundamentals.org/threejs/resources/images/wall.jpg'),}) <template> <div id="three" style="height: 1100px;width: 1100px;"></div> </template> <script> import * as THREE from 'three' import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls' export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } }, mounted(){ this.qwe() }, methods: { qwe () { const conter = document.getElementById("three") let scren = new THREE.Scene() // 场景 //灯光 { const color = 0xFFFFFF; const intensity = 1; const light = new THREE.DirectionalLight(color, intensity); light.position.set(1, 1, 2);//x,y,z scren.add(light); } let camera = new THREE.PerspectiveCamera(50, conter.clientWidth / conter.clientHeight, 1, 1000)//透视相机 let render = new THREE.WebGL1Renderer()//渲染器 render.setClearColor("#f60") render.setSize(conter.clientWidth, conter.clientHeight)//渲染器大小 conter.appendChild(render.domElement)//渲染结果加载到容器里面 //镜头可移动 const controls = new OrbitControls(camera,render.domElement); controls.screenSpacePanning = true controls.update(); const loader = new THREE.TextureLoader()//贴图 //添加地板 const geome = new THREE.PlaneBufferGeometry(20,20) const mate = new THREE.MeshPhongMaterial({ map: loader.load('https://threejsfundamentals.org/threejs/resources/images/wall.jpg'),}) let mesh = new THREE.Mesh(geome,mate) mesh.rotation.x = -Math.PI/2 mesh.rotation.z = -Math.PI // mesh.rotation.y = Math.PI/2 mesh.position.y = -1.3 scren.add(mesh) let geometry = new THREE.BoxGeometry(0.5,0.5,0.5)//几合体 宽长高 let material = new THREE.MeshPhongMaterial({ map: loader.load('https://threejsfundamentals.org/threejs/resources/images/wall.jpg'),})//材质 MeshBasicMaterial不受灯光影响 let cub = new THREE.Mesh(geometry, material)//网格 cub.position.z = -2 cub.position.y = 2 let geometry2 = new THREE.DodecahedronBufferGeometry (0.5,1)//球 let material2 = new THREE.MeshPhongMaterial({color:0xffff00 })//材质 MeshBasicMaterial不受灯光影响 let cub2 = new THREE.Mesh(geometry2, material2)//网格 const geometry3 = new THREE.ConeBufferGeometry(0.3,0.5,50);//圆锥 let material3 = new THREE.MeshPhongMaterial({color:0xff0f00 })//材质 MeshBasicMaterial不受灯光影响 let cub3 = new THREE.Mesh(geometry3, material3)//网格 let geometry4 = new THREE.BoxGeometry(1,1,1)//几合体 宽长高 const loader4 = new THREE.TextureLoader()//贴图 let material4 = [ new THREE.MeshPhongMaterial({ map: loader4.load('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1107222352,326734774&fm=26&gp=0.jpg'),}),//材质 MeshBasicMaterial不受灯光影响 new THREE.MeshPhongMaterial({ map: loader4.load('https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2710640311,2174739898&fm=26&gp=0.jpg'),}),//材质 MeshBasicMaterial不受灯光影响 new THREE.MeshPhongMaterial({ map: loader4.load('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3740053622,1149390982&fm=26&gp=0.jpg'),}),//材质 MeshBasicMaterial不受灯光影响 new THREE.MeshPhongMaterial({ map: loader4.load('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1032090787,3027113824&fm=26&gp=0.jpg'),}),//材质 MeshBasicMaterial不受灯光影响 new THREE.MeshPhongMaterial({ map: loader4.load('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3738970635,2195747010&fm=26&gp=0.jpg'),}),//材质 MeshBasicMaterial不受灯光影响 new THREE.MeshPhongMaterial({ map: loader4.load('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1532844926,3671374399&fm=26&gp=0.jpg'),})//材质 MeshBasicMaterial不受灯光影响 ] let cub4 = new THREE.Mesh(geometry4, material4)//网格 cub3.position.x = 1.5 cub2.position.x = -1.5 scren.add(cub)//将网格加到场景去 scren.add(cub2) scren.add(cub3) scren.add(cub4) camera.position.z = 5//改变相机位置 function renders(){ requestAnimationFrame(renders) cub.rotation.x+=0.01//动起来 cub.rotation.y+=0.01//动起来 cub2.rotation.x-=0.01//动起来 cub2.rotation.y-=0.01//动起来 cub3.rotation.x-=0.01//动起来 cub3.rotation.z-=0.01//动起来 cub4.rotation.x-=0.01//动起来 cub4.rotation.z-=0.01//动起来 render.render(scren,camera) } renders() } } } </script>