three.js简单例子墙上挖门_vue中使用threebspjs扩展库资源-CSDN文库

共16个文件

js：14个

html：1个

jpg：1个

three.js

webgl

web

html5

5星 · 超过95%的资源需积分: 48 8 浏览量 2016-06-02 18:13:51 上传评论 2 收藏 127KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

ThreeJS-RXL.rar （16个子文件）

images

floor.jpg 8KB

index.html 8KB

controls

EditorControls.js 8KB

DeviceOrientationControls.js 3KB

FlyControls.js 7KB

PointerLockControls.js 1KB

MouseControls.js 1KB

TransformControls.js 32KB

OrbitControls.js 24KB

FirstPersonControls.js 6KB

OrthographicTrackballControls.js 14KB

TrackballControls.js 14KB

DragControls.js 5KB

VRControls.js 2KB

ThreeBSP.js 17KB

three.min.js 421KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body { margin: 0; } canvas { width: 100%; height: 100%; } </style> </head> <body> <script src="js/three.min.js"></script> <script src="js/controls/OrbitControls.js"></script> <script src="js/ThreeBSP.js"></script> <script> var scene; function initScene(){ scene = new THREE.Scene(); } function updateControls() { controls.update(); } var camera; function initCamera(){ camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000); camera.position.z = 40; camera.position.y = 40; camera.position.x = 20; camera.lookAt({x:0,y:0,z:0}); controls = new THREE.OrbitControls( camera ); controls.addEventListener( 'change', updateControls ); } var renderer; function initRender(){ renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); renderer.setClearColor(0xFFFFFF, 1.0); } var light; function initLight() { // A start // 第二个参数是光源强度，你可以改变它试一下 light = new THREE.DirectionalLight(0xFF0000,1); // 位置不同，方向光作用于物体的面也不同，看到的物体各个面的颜色也不一样 light.position.set(0,0,1); scene.add(light); // A end } function initObject(){ // 坐标轴 var axis = new THREE.AxisHelper(20); // 在场景中添加坐标轴 scene.add(axis); // 地面 var floor = new THREE.BoxGeometry( 70, 100, 1); //var floorMaterial = new THREE.MeshBasicMaterial( {color: '#87CEEB', wireframe: false } ); var floorMaterial = new THREE.MeshBasicMaterial( {color: '#87CEEB', wireframe: false } ); var texture = THREE.ImageUtils.loadTexture("images/floor.jpg",null,function(t) { }); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(40, 40); var material = new THREE.MeshBasicMaterial({map:texture}); var floorCube = new THREE.Mesh( floor, material ); scene.add( floorCube ); floorCube.rotation.x += 0.5*Math.PI; // 墙面 var cubeGeometry = new THREE.BoxGeometry(1, 10, 60); // 创建墙面材料 //var cubeMaterial = new THREE.MeshBasicMaterial({ color: '#8B0A50', wireframe: false}); var cubeMaterial = new THREE.MeshBasicMaterial({ color: '#8B0A50', wireframe: false}); /************各个面设置不同的纹理*********/ var matArray = []; //matArray.push(new THREE.MeshBasicMaterial({color: 0x9cb2d1})); matArray.push(new THREE.MeshBasicMaterial({color: 0x9cb2d1})); matArray.push(new THREE.MeshBasicMaterial({color: 0xafc0ca})); matArray.push(new THREE.MeshBasicMaterial({color: 0xd6e4ec})); matArray.push(new THREE.MeshBasicMaterial({color: 0x9cb2d1})); matArray.push(new THREE.MeshBasicMaterial({color: 0x9cb2d1})); matArray.push(new THREE.MeshBasicMaterial({color: 0x9cb2d1})); var faceMaterial = new THREE.MeshFaceMaterial(matArray); var matArray = []; matArray.push(new THREE.MeshBasicMaterial({color: 0xafc0ca})); matArray.push(new THREE.MeshBasicMaterial({color: 0x9cb2d1})); matArray.push(new THREE.MeshBasicMaterial({color: 0xd6e4ec})); matArray.push(new THREE.MeshBasicMaterial({color: 0x9cb2d1})); matArray.push(new THREE.MeshBasicMaterial({color: 0x9cb2d1})); matArray.push(new THREE.MeshBasicMaterial({color: 0x9cb2d1})); var faceMaterial1 = new THREE.MeshFaceMaterial(matArray); // 合成立方体 //var cube = new THREE.Mesh( cubeGeometry, cubeMaterial ); var cube = new THREE.Mesh( cubeGeometry, faceMaterial1 ); // 设置墙面位置 cube.position.x = -15; cube.position.y = 5; cube.position.z = 0; // 在场景中添加墙面 scene.add(cube); // 墙面1 var cubeGeometry = new THREE.BoxGeometry(1, 10, 30); // 合成立方体 var cube = new THREE.Mesh( cubeGeometry, faceMaterial1 ); // 设置墙面位置 cube.position.x = 0; cube.position.y = 5; cube.position.z = 30; cube.rotation.y += 0.5*Math.PI; // 在场景中添加墙面 scene.add(cube); // 墙面2 var cubeGeometry = new THREE.BoxGeometry(1, 10, 60); // 合成立方体 var cube = new THREE.Mesh( cubeGeometry, faceMaterial ); // 设置墙面位置 cube.position.x = 15; cube.position.y = 5; cube.position.z = 0; // 在场景中添加墙面 scene.add(cube); // 墙面3 var cubeGeometry = new THREE.BoxGeometry(1, 10, 30); // 合成立方体 //var cube = new THREE.Mesh( cubeGeometry, faceMaterial ); var cube = new THREE.Mesh( cubeGeometry ); // 设置墙面位置 cube.position.x = 0; cube.position.y = 5; cube.position.z = -30; cube.rotation.y += 0.5*Math.PI; // 在场景中添加墙面 // scene.add(cube); // 门 var door = new THREE.BoxGeometry(1, 8, 9); // 创建门材料 //var doorMaterial = new THREE.MeshBasicMaterial({ color: '#FFFF00', wireframe: true,transparent:true,opacity:0.6}); //var door_cube = new THREE.Mesh( door, faceMaterial); var door_cube = new THREE.Mesh( door); // 设置门位置 door_cube.position.x = 0; door_cube.position.y = 5; door_cube.position.z = -30; door_cube.rotation.y += 0.5*Math.PI; //scene.add(cube); var sphere1BSP = new ThreeBSP(cube); var cube2BSP = new ThreeBSP(door_cube); resultBSP = sphere1BSP.subtract(cube2BSP); result = resultBSP.toMesh(); result.material.shading = THREE.FlatShading; result.geometry.computeFaceNormals(); result.geometry.computeVertexNormals(); result.material.needsUpdate = true; result.geometry.buffersNeedUpdate = true; result.geometry.uvsNeedUpdate = true; scene.add(result); //var l = new THREE.Line( drawShape().createPointsGeometry(10), new THREE.LineBasicMaterial({color:0xff3333, linewidth:2})); //scene.add(l); /*var options = { amount: 10, bevelThickness: 2, bevelSize: 1, bevelSegments: 3, bevelEnabled: true, curveSegments: 12, steps: 1 }; shape = createMesh(new THREE.ExtrudeGeometry(drawShape(), options));*/ } function drawShape(){ var shape = new THREE.Shape(); shape.moveTo(10, 10); shape.lineTo(10, 40); shape.lineTo(40, 40); shape.lineTo(10, 10); return shape; } function rend

评论收藏

内容反馈