|
|
@ -13,31 +13,16 @@ import { CopyShader } from 'three/examples/jsm/shaders/CopyShader.js'; |
|
|
import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js'; |
|
|
import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js'; |
|
|
import { SSAARenderPass } from 'three/examples/jsm/postprocessing/SSAARenderPass.js'; |
|
|
import { SSAARenderPass } from 'three/examples/jsm/postprocessing/SSAARenderPass.js'; |
|
|
|
|
|
|
|
|
|
|
|
var v1 = new THREE.Vector3(2.3393851600186215, 11.576051832245172, -3.4251959648280117); |
|
|
|
|
|
var v2 = new THREE.Vector3(11.766872261378083, 12.781233823342808, 13.780029939510671); |
|
|
|
|
|
var v3 = new THREE.Vector3(11.766872261378083, 12.781233823342808, -13.780029939510671); |
|
|
|
|
|
var v4 = new THREE.Vector3(2.3393851600186215, 11.576051832245172, 3.4251959648280117); |
|
|
|
|
|
|
|
|
var ui; |
|
|
var ui; |
|
|
// ref for lumens: http://www.power-sure.com/lumens.htm
|
|
|
|
|
|
var bulbLuminousPowers = { |
|
|
|
|
|
"110000 lm (1000W)": 110000, |
|
|
|
|
|
"3500 lm (300W)": 3500, |
|
|
|
|
|
"1700 lm (100W)": 1700, |
|
|
|
|
|
"800 lm (60W)": 800, |
|
|
|
|
|
"400 lm (40W)": 400, |
|
|
|
|
|
"180 lm (25W)": 180, |
|
|
|
|
|
"20 lm (4W)": 20, |
|
|
|
|
|
"Off": 0 |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// ref for solar irradiances: https://en.wikipedia.org/wiki/Lux
|
|
|
|
|
|
var hemiLuminousIrradiances = { |
|
|
|
|
|
"0.5 lx (Full Moon)": 0.5, |
|
|
|
|
|
"3.4 lx (City Twilight)": 3.4, |
|
|
|
|
|
"10 lx (Custom Nemo)": 10, |
|
|
|
|
|
}; |
|
|
|
|
|
var gui = new GUI(); |
|
|
var gui = new GUI(); |
|
|
var params = { |
|
|
var params = { |
|
|
exposure: 0.68, |
|
|
|
|
|
bulbPower: Object.keys(bulbLuminousPowers)[4], |
|
|
|
|
|
hemiIrradiance: Object.keys(hemiLuminousIrradiances)[1] |
|
|
|
|
|
|
|
|
exposure: 0.68 |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
var container = document.getElementById('container'); |
|
|
var container = document.getElementById('container'); |
|
|
@ -45,23 +30,16 @@ var container = document.getElementById('container'); |
|
|
//创建场景
|
|
|
//创建场景
|
|
|
var scene = new THREE.Scene(); |
|
|
var scene = new THREE.Scene(); |
|
|
|
|
|
|
|
|
var hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.8); |
|
|
|
|
|
|
|
|
var hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.0); |
|
|
scene.add(hemiLight); |
|
|
scene.add(hemiLight); |
|
|
|
|
|
|
|
|
var bulbGeometry = new THREE.SphereBufferGeometry(0.22, 16, 8); |
|
|
|
|
|
var bulbMat = new THREE.MeshStandardMaterial({ |
|
|
|
|
|
emissive: 0xffffff, |
|
|
|
|
|
emissiveIntensity: 12, |
|
|
|
|
|
color: 0x000000 |
|
|
|
|
|
}); |
|
|
|
|
|
var bulbLight = new THREE.PointLight(0xddeeff, 1, 100, 2); |
|
|
|
|
|
bulbLight.add(new THREE.Mesh(bulbGeometry, bulbMat)); |
|
|
|
|
|
bulbLight.position.set(0.0, 25.0, -22.0); |
|
|
|
|
|
scene.add(bulbLight); |
|
|
|
|
|
|
|
|
|
|
|
ui = gui.addFolder("灯光"); |
|
|
|
|
|
ui.add(params, 'hemiIrradiance', Object.keys(hemiLuminousIrradiances)); |
|
|
|
|
|
ui.add(params, 'bulbPower', Object.keys(bulbLuminousPowers)); |
|
|
|
|
|
|
|
|
addBulb(v2); |
|
|
|
|
|
addBulb(v1); |
|
|
|
|
|
addBulb(v3); |
|
|
|
|
|
addBulb(v4); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ui = gui.addFolder("环境光与穹顶灯"); |
|
|
ui.add(params, 'exposure', 0, 1); |
|
|
ui.add(params, 'exposure', 0, 1); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -84,11 +62,13 @@ mtlLoader.load('dimian.mtl', function (materials) { |
|
|
materials.materials.jinshuxian = makeJinshuxian(); |
|
|
materials.materials.jinshuxian = makeJinshuxian(); |
|
|
materials.materials.qiangbu = makeQiangbu(); |
|
|
materials.materials.qiangbu = makeQiangbu(); |
|
|
materials.materials.dalishi = makeDalishi(); |
|
|
materials.materials.dalishi = makeDalishi(); |
|
|
|
|
|
materials.materials.dengkuang = makeDengkuang(); |
|
|
|
|
|
|
|
|
objLoader.setMaterials(materials); |
|
|
|
|
|
|
|
|
|
|
|
objLoader.load('33.obj', function (mesh) { |
|
|
|
|
|
|
|
|
objLoader.setMaterials(materials); |
|
|
|
|
|
|
|
|
|
|
|
objLoader.load('keting.obj', function (mesh) { |
|
|
|
|
|
console.log(mesh); |
|
|
mesh.scale.set(0.01, 0.01, 0.01); |
|
|
mesh.scale.set(0.01, 0.01, 0.01); |
|
|
scene.add(mesh); |
|
|
scene.add(mesh); |
|
|
} |
|
|
} |
|
|
@ -103,9 +83,8 @@ scene.add(axesHelper); |
|
|
|
|
|
|
|
|
//创建相机
|
|
|
//创建相机
|
|
|
var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000000); |
|
|
var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000000); |
|
|
camera.position.x = -4; |
|
|
|
|
|
camera.position.z = 3; |
|
|
|
|
|
camera.position.y = 1; |
|
|
|
|
|
|
|
|
camera.position.copy(v2); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//创建渲染器
|
|
|
//创建渲染器
|
|
|
var renderer = new THREE.WebGLRenderer(); |
|
|
var renderer = new THREE.WebGLRenderer(); |
|
|
@ -122,6 +101,7 @@ container.appendChild(renderer.domElement); |
|
|
//控制器
|
|
|
//控制器
|
|
|
var clock = new THREE.Clock(); |
|
|
var clock = new THREE.Clock(); |
|
|
const controls = new OrbitControls(camera, renderer.domElement); |
|
|
const controls = new OrbitControls(camera, renderer.domElement); |
|
|
|
|
|
controls.target.copy(v1); |
|
|
// controls.enableZoom = true;
|
|
|
// controls.enableZoom = true;
|
|
|
// controls.enablePan = false;
|
|
|
// controls.enablePan = false;
|
|
|
// controls.minDistance = 5;
|
|
|
// controls.minDistance = 5;
|
|
|
@ -130,12 +110,6 @@ const controls = new OrbitControls(camera, renderer.domElement); |
|
|
// controls.dampingFactor = 0.25;
|
|
|
// controls.dampingFactor = 0.25;
|
|
|
// controls.rotation = 0.3;
|
|
|
// controls.rotation = 0.3;
|
|
|
|
|
|
|
|
|
var targetMat = new THREE.MeshBasicMaterial({ color: '#ff0000' }); |
|
|
|
|
|
var targetGeo = new THREE.BoxGeometry(4, 17, 4); |
|
|
|
|
|
var camTarget = new THREE.Mesh(targetGeo, targetMat); |
|
|
|
|
|
camTarget.position.set(0, 0, 0); |
|
|
|
|
|
//scene.add(camTarget);
|
|
|
|
|
|
|
|
|
|
|
|
//抗锯齿
|
|
|
//抗锯齿
|
|
|
var composer; |
|
|
var composer; |
|
|
var ssaaRenderPass; |
|
|
var ssaaRenderPass; |
|
|
@ -155,9 +129,9 @@ function render() { |
|
|
controls.update(clock.getDelta); |
|
|
controls.update(clock.getDelta); |
|
|
//controls.target.copy(camTarget.position).add(new THREE.Vector3(0, 7, 0));
|
|
|
//controls.target.copy(camTarget.position).add(new THREE.Vector3(0, 7, 0));
|
|
|
renderer.toneMappingExposure = Math.pow(params.exposure, 5.0); // to allow for very bright scenes.
|
|
|
renderer.toneMappingExposure = Math.pow(params.exposure, 5.0); // to allow for very bright scenes.
|
|
|
bulbLight.power = bulbLuminousPowers[params.bulbPower]; |
|
|
|
|
|
|
|
|
//bulbLight.power = bulbLuminousPowers[params.bulbPower];
|
|
|
//bulbMat.emissiveIntensity = bulbLight.intensity / Math.pow(0.02, 2.0); // convert from intensity to irradiance at bulb surface
|
|
|
//bulbMat.emissiveIntensity = bulbLight.intensity / Math.pow(0.02, 2.0); // convert from intensity to irradiance at bulb surface
|
|
|
hemiLight.intensity = hemiLuminousIrradiances[params.hemiIrradiance]; |
|
|
|
|
|
|
|
|
//hemiLight.intensity = hemiLuminousIrradiances[params.hemiIrradiance];
|
|
|
requestAnimationFrame(render); |
|
|
requestAnimationFrame(render); |
|
|
|
|
|
|
|
|
ssaaRenderPass.sampleLevel = 3; |
|
|
ssaaRenderPass.sampleLevel = 3; |
|
|
@ -169,6 +143,19 @@ function render() { |
|
|
render(); |
|
|
render(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function addBulb(position) { |
|
|
|
|
|
var bulbGeometry = new THREE.SphereBufferGeometry(0.10, 10, 8); |
|
|
|
|
|
var bulbMat = new THREE.MeshStandardMaterial({ |
|
|
|
|
|
emissive: 0xffffff, |
|
|
|
|
|
emissiveIntensity: 12, |
|
|
|
|
|
color: 0x000000 |
|
|
|
|
|
}); |
|
|
|
|
|
var bulbLight = new THREE.PointLight(0xddeeff, 8, 100, 2); |
|
|
|
|
|
bulbLight.add(new THREE.Mesh(bulbGeometry, bulbMat)); |
|
|
|
|
|
bulbLight.position.copy(position); |
|
|
|
|
|
scene.add(bulbLight); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
function makeDimian() { |
|
|
function makeDimian() { |
|
|
//diffuse map
|
|
|
//diffuse map
|
|
|
var diffuseMpa = textureLoader.load('./ket_dimian_BaseColor.png'); |
|
|
var diffuseMpa = textureLoader.load('./ket_dimian_BaseColor.png'); |
|
|
@ -614,3 +601,44 @@ function makeDalishi() { |
|
|
}); |
|
|
}); |
|
|
return ret; |
|
|
return ret; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function makeDengkuang() { |
|
|
|
|
|
//diffuse map
|
|
|
|
|
|
var diffuseMpa = textureLoader.load('./dengkuang_BaseColor.png'); |
|
|
|
|
|
diffuseMpa.wrapS = 1000; |
|
|
|
|
|
diffuseMpa.wrapT = 1000; |
|
|
|
|
|
diffuseMpa.repeat.copy(new THREE.Vector2(1, 1)); |
|
|
|
|
|
diffuseMpa.offset.copy(new THREE.Vector2(0, 0)); |
|
|
|
|
|
|
|
|
|
|
|
//bump map
|
|
|
|
|
|
var bumpMap = textureLoader.load('./dengkuang_Normal.png'); |
|
|
|
|
|
bumpMap.wrapS = THREE.RepeatWrapping; |
|
|
|
|
|
bumpMap.wrapT = THREE.RepeatWrapping; |
|
|
|
|
|
bumpMap.repeat.copy(new THREE.Vector2(1, 1)); |
|
|
|
|
|
bumpMap.offset.copy(new THREE.Vector2(0, 0)); |
|
|
|
|
|
|
|
|
|
|
|
//matelness map
|
|
|
|
|
|
var matelMap = textureLoader.load('./dengkuang_Metallic.png'); |
|
|
|
|
|
matelMap.wrapS = THREE.RepeatWrapping; |
|
|
|
|
|
matelMap.wrapT = THREE.RepeatWrapping; |
|
|
|
|
|
matelMap.repeat.copy(new THREE.Vector2(1, 1)); |
|
|
|
|
|
matelMap.offset.copy(new THREE.Vector2(0, 0)); |
|
|
|
|
|
|
|
|
|
|
|
//roughness map
|
|
|
|
|
|
var roughnessMap = textureLoader.load('./dengkuang_Roughness.png'); |
|
|
|
|
|
roughnessMap.wrapS = THREE.RepeatWrapping; |
|
|
|
|
|
roughnessMap.wrapT = THREE.RepeatWrapping; |
|
|
|
|
|
roughnessMap.repeat.copy(new THREE.Vector2(1, 1)); |
|
|
|
|
|
roughnessMap.offset.copy(new THREE.Vector2(0, 0)); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var ret = new MeshStandardMaterial({ |
|
|
|
|
|
//color: 0xff0000,
|
|
|
|
|
|
map: diffuseMpa, |
|
|
|
|
|
bumpMap: bumpMap, |
|
|
|
|
|
metalnessMap: matelMap, |
|
|
|
|
|
roughnessMap: roughnessMap, |
|
|
|
|
|
bumpScale: 0.06 |
|
|
|
|
|
}); |
|
|
|
|
|
return ret; |
|
|
|
|
|
} |
