threejs/src/index.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 container = document.getElementById('container');

//创建场景
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 axesHelper = new THREE.AxesHelper( 15 );
scene.add( axesHelper );

//创建相机
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(30, 30, 30)", 1); //设置背景颜色
container.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);

// 渲染函数
function render() {
    renderer.render(scene, camera); //执行渲染操作
    requestAnimationFrame(render);
}
render();