From 99fed93096f1cc68b8baa6f3ce6add9ba2f45901 Mon Sep 17 00:00:00 2001 From: blobt Date: Mon, 28 Sep 2020 10:58:48 +0800 Subject: [PATCH] tmp --- dist/index.html | 1 + src/index.js | 141 +++++++++++++++++++++++++++++++----------------- 2 files changed, 94 insertions(+), 48 deletions(-) diff --git a/dist/index.html b/dist/index.html index 392d723..6e8dac4 100644 --- a/dist/index.html +++ b/dist/index.html @@ -9,6 +9,7 @@ +
\ No newline at end of file diff --git a/src/index.js b/src/index.js index 1c4fc4b..4d67740 100644 --- a/src/index.js +++ b/src/index.js @@ -1,68 +1,113 @@ -import "@babel/polyfill"; -import { MeshBasicMaterial } from 'three/src/materials/MeshBasicMaterial.js'; -import { WebGLRenderer } from 'three/src/renderers/WebGLRenderer.js'; -import { Scene } from 'three/src/scenes/Scene.js'; import * as THREE from 'three'; +import { TextureLoader } from 'three/src/loaders/TextureLoader.js'; +import { WebGLRenderer } from 'three/src/renderers/WebGLRenderer.js'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; -//创建场景 -var scene = new Scene(); +var container = document.getElementById('container'); -//创建模型和material -var geometry = new THREE.SphereBufferGeometry(20, 10, 50); -var material = new MeshBasicMaterial({ - color: 0xffff00 +//创建场景 +var scene = new THREE.Scene(); + +var hemiLight = new THREE.HemisphereLight(0xddeeff, 0x0f0e0d, 2.8); +scene.add(hemiLight); + +var bulbLight = new THREE.PointLight(0xffee88, 10.8, 10, 2.9); +bulbLight.position.set(0.0, 1.3, 0.0); +scene.add(bulbLight); + +var textureLoader = new TextureLoader(); + +//创建地板 +var diffuseTexture = textureLoader.load("hardwood2_diffuse.jpg"); +diffuseTexture.wrapS = THREE.RepeatWrapping; +diffuseTexture.wrapT = THREE.RepeatWrapping; +diffuseTexture.anisotropy = 4; +diffuseTexture.repeat.set(10, 24); +diffuseTexture.encoding = THREE.sRGBEncoding; + +var bumpTexture = textureLoader.load("hardwood2_bump.jpg"); +bumpTexture.wrapS = THREE.RepeatWrapping; +bumpTexture.wrapT = THREE.RepeatWrapping; +bumpTexture.anisotropy = 4; +bumpTexture.repeat.set(10, 24); +bumpTexture.encoding = THREE.sRGBEncoding; + +var roughnessTexture = textureLoader.load("hardwood2_roughness.jpg"); +roughnessTexture.wrapS = THREE.RepeatWrapping; +roughnessTexture.wrapT = THREE.RepeatWrapping; +roughnessTexture.anisotropy = 4; +roughnessTexture.repeat.set(10, 24); +roughnessTexture.encoding = THREE.sRGBEncoding; + +var floorMat = new THREE.MeshStandardMaterial({ + roughness: 0.8, + color: 0xffffff, + metalness: 0.12, + bumpScale: 0.005, + side: THREE.DoubleSide, + map: diffuseTexture, + bumpMap: bumpTexture, + roughnessMap:roughnessTexture }); +floorMat.needsUpdate = true; + +var floorGeometry = new THREE.PlaneBufferGeometry(20, 20); +var floorMesh = new THREE.Mesh(floorGeometry, floorMat); +floorMesh.receiveShadow = true; +floorMesh.rotation.x = - Math.PI / 2.0; +scene.add(floorMesh); + + +//创建墙 +var matArrayB = [];//外墙 +matArrayB.push(new THREE.MeshPhongMaterial({color: 0xafc0ca})); //前 0xafc0ca :灰色 +matArrayB.push(new THREE.MeshPhongMaterial({color: 0x9cb2d1})); //后 0x9cb2d1：淡紫 +matArrayB.push(new THREE.MeshPhongMaterial({color: 0xd6e4ec})); //上 0xd6e4ec： 偏白色 +matArrayB.push(new THREE.MeshPhongMaterial({color: 0xd6e4ec})); //下 +matArrayB.push(new THREE.MeshPhongMaterial({color: 0xafc0ca})); //左 0xafc0ca :灰色 +matArrayB.push(new THREE.MeshPhongMaterial({color: 0xafc0ca})); //右 + +function createCubeWall(width, height, depth,angle,material,x,y,z){ + var cubeGeometry = new THREE.BoxGeometry(width, height, depth ); + var cube = new THREE.Mesh( cubeGeometry, material ); + cube.position.x = x; + cube.position.y = height / 2; + cube.position.z = z; + cube.rotation.y += angle*Math.PI; //-逆时针旋转,+顺时针 + scene.add(cube); +} +createCubeWall(0.05, 1.6, 4.5,0,matArrayB,2,0,0.225); +createCubeWall(0.05, 1.6, 4,0.5,matArrayB,0,0,-2); -var mesh = new THREE.Mesh(geometry, material); -scene.add(mesh); - -var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); -camera.position.set(0, 0, 100); -camera.lookAt(scene.position); - -var renderer = new WebGLRenderer(); - -renderer.setSize(window.innerWidth, window.innerHeight); -renderer.setClearColor("rgb(25, 25, 25)", 1); //设置背景颜色 -document.body.appendChild(renderer.domElement); - -renderer.render(scene, camera); - - -/*//光照 -var ambient = new THREE.AmbientLight(0x004444); //环境光 -var point = new THREE.PointLight(0xffffff); -point.position.set(400, 200, 301); //点光源位置 - -//布置场景 -// scene.add(ambient); -// scene.add(point); -// 辅助坐标系 -var axisHelper = new THREE.AxesHelper(250); -scene.add(axisHelper); +//添加辅助坐标 +var axesHelper = new THREE.AxesHelper( 15 ); +scene.add( axesHelper ); -//创建摄像机 -var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); -camera.position.set(0, 0, 100); -camera.lookAt(scene.position); +//创建相机 +var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100); +camera.position.x = -4; +camera.position.z = 3; +camera.position.y = 1; //创建渲染器 var renderer = new WebGLRenderer(); - +renderer.physicallyCorrectLights = true; +renderer.outputEncoding = THREE.sRGBEncoding; +renderer.shadowMap.enabled = true; +renderer.toneMapping = THREE.ReinhardToneMapping; +renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); -renderer.setClearColor("rgb(255, 255, 255)", 1); //设置背景颜色 -document.body.appendChild(renderer.domElement); +renderer.setClearColor("rgb(30, 30, 30)", 1); //设置背景颜色 +container.appendChild(renderer.domElement); const controls = new OrbitControls(camera, renderer.domElement); + // 渲染函数 function render() { renderer.render(scene, camera); //执行渲染操作 + requestAnimationFrame(render); } -render(); - -//监听鼠标事件，触发渲染函数，更新canvas画布渲染效果 -controls.addEventListener('change', render);*/ \ No newline at end of file +render(); \ No newline at end of file