blobt
/
threejs
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

tmp

loadobj
blobt 4 years ago
parent
d414a12172
commit
99fed93096
2 changed files with 94 additions and 48 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      dist/index.html
  2. 141
      src/index.js

1
dist/index.html
View File

@ -9,6 +9,7 @@
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

141
src/index.js
View File

@ -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);*/
render();
Write Preview
Loading…
Cancel
Save