5.threejs教程 vr房间实战案例

xiefandaren · 发表于 2022-6-25 00:21:18

加谢凡微信：xiefandaren 送threejs物联网同行交流群

工程文件
链接：https://pan.baidu.com/s/1OiwAP26lZNcdLl7yyNt5aA
提取码：0sjm
--来自百度网盘超级会员V5的分享

https://www.xiefansq.com/threejs/bowuguan/vrfangjian/
tex贴图树下方案

var texLoader = new THREE.TextureLoader();//纹理贴图加载器
emissiveMap: texLoader.load("./贴图1_0044.jpg")

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>three js的第一个项目</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script type="module">
import * as THREE from '../../../../threejs/three.js-r130/build/three.module.js';
// 引入gltf模型加载库GLTFLoader.js
// import { GLTFLoader } from '../../../../threejs/three.js-r130/examples/jsm/loaders/GLTFLoader.js';
// 引入Three.js扩展库OrbitControls.js：旋转缩放功能
import { OrbitControls } from '../../../../threejs/three.js-r130/examples/jsm/controls/OrbitControls.js';
const scene = new THREE.Scene();//新建 three js资源场景
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );//创建一个摄像机
camera.position.set(-9,5,2);
const geometry = new THREE.PlaneGeometry( 1, 1 );
const material = new THREE.MeshLambertMaterial( {color: 0xffffff, side: THREE.DoubleSide} );
const plane = new THREE.Mesh( geometry, material );
scene.add( plane );
plane.scale.set(6.5,6.5,6.5);
plane.rotation.set(90/180 *Math.PI,0,0);
plane.receiveShadow = true;
const geometry1 = new THREE.BoxGeometry( 1, 1, 1 );
const material1 = new THREE.MeshLambertMaterial( {color: 0xffffff} );
const cube = new THREE.Mesh( geometry1, material1 );
scene.add( cube );
cube.position.set(0,2,0);
cube.castShadow = true;
const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
scene.add( directionalLight );
directionalLight.position.set(5,10,7.5);
directionalLight.castShadow = true;
const renderer = new THREE.WebGLRenderer();//创建three js渲染器
renderer.shadowMap.enabled = true;
renderer.setSize( window.innerWidth, window.innerHeight );//设置渲染窗口大小
document.body.appendChild( renderer.domElement );//将渲染参数添加到框架
var controls = new OrbitControls(camera, renderer.domElement);//设置相机可以操作的权限
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();//实时刷新我们的渲染结果
</script>
</body>
</html>

复制代码

项目代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>three js的第一个项目</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script type="module">
import * as THREE from '../../../../threejs/three.js-r130/build/three.module.js';
// 引入gltf模型加载库GLTFLoader.js
// import { GLTFLoader } from '../../../../threejs/three.js-r130/examples/jsm/loaders/GLTFLoader.js';
// 引入Three.js扩展库OrbitControls.js：旋转缩放功能
import { OrbitControls } from '../../../../threejs/three.js-r130/examples/jsm/controls/OrbitControls.js';
const scene = new THREE.Scene();//新建 three js资源场景
const camera = new THREE.PerspectiveCamera( 38, window.innerWidth / window.innerHeight, 0.1, 1000 );//创建一个摄像机
camera.position.set(-7,0.2,8);
const geometry = new THREE.SphereGeometry( 600, 32, 16 );
var texLoader = new THREE.TextureLoader();//纹理贴图加载器
const material = new THREE.MeshStandardMaterial( {
color: 0xfffffff ,
emissive : 0xfffffff ,
emissiveMap: texLoader.load("./教学0021.jpg"),
side: THREE.DoubleSide} );
const sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );
const renderer = new THREE.WebGLRenderer();//创建three js渲染器
renderer.shadowMap.enabled = true;
renderer.setSize( window.innerWidth, window.innerHeight );//设置渲染窗口大小
document.body.appendChild( renderer.domElement );//将渲染参数添加到框架
var controls = new OrbitControls(camera, renderer.domElement);//设置相机可以操作的权限
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();//实时刷新我们的渲染结果
</script>
</body>
</html>

复制代码

		自动登录	找回密码
密码			立即注册

[three js基础教程] 5.threejs教程 vr房间实战案例