2 changed files with 94 additions and 48 deletions
-
1dist/index.html
-
141src/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 * 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'; |
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(); |
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.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); |
const controls = new OrbitControls(camera, renderer.domElement); |
||||
|
|
||||
// 渲染函数
|
// 渲染函数
|
||||
function render() { |
function render() { |
||||
renderer.render(scene, camera); //执行渲染操作
|
renderer.render(scene, camera); //执行渲染操作
|
||||
|
requestAnimationFrame(render); |
||||
} |
} |
||||
render(); |
|
||||
|
|
||||
//监听鼠标事件，触发渲染函数，更新canvas画布渲染效果
|
|
||||
controls.addEventListener('change', render);*/ |
|
||||
|
render(); |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue