谢凡社区_C4D&Ae设计交流社区

 找回密码
 立即注册
查看: 389|回复: 0

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

[复制链接]

351

主题

351

帖子

10万

金币

管理员

Rank: 9Rank: 9Rank: 9

积分
207890
发表于 2022-6-25 00:21:18 | 显示全部楼层 |阅读模式
1.png
加谢凡微信:xiefandaren 送threejs物联网同行交流群

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

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

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






  1. <!DOCTYPE html>
  2. <html lang="en">

  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>three js的第一个项目</title>
  6.   <style>
  7.     body {
  8.       margin: 0;
  9.       overflow: hidden;
  10.     }
  11.   </style>


  12. </head>

  13. <body>

  14.   <script type="module">
  15.    
  16.     import * as THREE from '../../../../threejs/three.js-r130/build/three.module.js';
  17.     // 引入gltf模型加载库GLTFLoader.js
  18.     // import { GLTFLoader } from '../../../../threejs/three.js-r130/examples/jsm/loaders/GLTFLoader.js';
  19.     // 引入Three.js扩展库OrbitControls.js:旋转缩放功能
  20.     import { OrbitControls } from '../../../../threejs/three.js-r130/examples/jsm/controls/OrbitControls.js';

  21.     const scene = new THREE.Scene();//新建 three js资源场景
  22.     const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );//创建一个摄像机
  23.     camera.position.set(-9,5,2);
  24.    
  25.     const geometry = new THREE.PlaneGeometry( 1, 1 );
  26.     const material = new THREE.MeshLambertMaterial( {color: 0xffffff, side: THREE.DoubleSide} );
  27.     const plane = new THREE.Mesh( geometry, material );
  28.     scene.add( plane );
  29.     plane.scale.set(6.5,6.5,6.5);
  30.     plane.rotation.set(90/180 *Math.PI,0,0);
  31.     plane.receiveShadow = true;

  32.     const geometry1 = new THREE.BoxGeometry( 1, 1, 1 );
  33.     const material1 = new THREE.MeshLambertMaterial( {color: 0xffffff} );
  34.     const cube = new THREE.Mesh( geometry1, material1 );
  35.     scene.add( cube );
  36.     cube.position.set(0,2,0);
  37.     cube.castShadow = true;

  38.     const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
  39.     scene.add( directionalLight );
  40.     directionalLight.position.set(5,10,7.5);
  41.     directionalLight.castShadow = true;
  42.    
  43.    
  44.     const renderer = new THREE.WebGLRenderer();//创建three js渲染器
  45.     renderer.shadowMap.enabled = true;
  46.     renderer.setSize( window.innerWidth, window.innerHeight );//设置渲染窗口大小

  47.     document.body.appendChild( renderer.domElement );//将渲染参数添加到框架

  48.     var controls = new OrbitControls(camera, renderer.domElement);//设置相机可以操作的权限
  49.    
  50.     function animate() {
  51.         requestAnimationFrame( animate );
  52.         renderer.render( scene, camera );
  53.     }
  54.     animate();//实时刷新我们的渲染结果
  55.          
  56.    
  57.   </script>
  58. </body>

  59. </html>

复制代码


项目代码
  1. <!DOCTYPE html>
  2. <html lang="en">

  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>three js的第一个项目</title>
  6.   <style>
  7.     body {
  8.       margin: 0;
  9.       overflow: hidden;
  10.     }
  11.   </style>


  12. </head>

  13. <body>

  14.   <script type="module">
  15.    
  16.     import * as THREE from '../../../../threejs/three.js-r130/build/three.module.js';
  17.     // 引入gltf模型加载库GLTFLoader.js
  18.     // import { GLTFLoader } from '../../../../threejs/three.js-r130/examples/jsm/loaders/GLTFLoader.js';
  19.     // 引入Three.js扩展库OrbitControls.js:旋转缩放功能
  20.     import { OrbitControls } from '../../../../threejs/three.js-r130/examples/jsm/controls/OrbitControls.js';

  21.     const scene = new THREE.Scene();//新建 three js资源场景
  22.     const camera = new THREE.PerspectiveCamera( 38, window.innerWidth / window.innerHeight, 0.1, 1000 );//创建一个摄像机
  23.     camera.position.set(-7,0.2,8);
  24.    
  25.     const geometry = new THREE.SphereGeometry( 600, 32, 16 );
  26.     var texLoader = new THREE.TextureLoader();//纹理贴图加载器
  27.     const material = new THREE.MeshStandardMaterial( {
  28.         color: 0xfffffff ,
  29.         emissive : 0xfffffff ,
  30.         emissiveMap: texLoader.load("./教学0021.jpg"),
  31.         side: THREE.DoubleSide} );
  32.     const sphere = new THREE.Mesh( geometry, material );
  33.     scene.add( sphere );
  34.    
  35.     const renderer = new THREE.WebGLRenderer();//创建three js渲染器
  36.     renderer.shadowMap.enabled = true;
  37.     renderer.setSize( window.innerWidth, window.innerHeight );//设置渲染窗口大小

  38.     document.body.appendChild( renderer.domElement );//将渲染参数添加到框架

  39.     var controls = new OrbitControls(camera, renderer.domElement);//设置相机可以操作的权限
  40.    
  41.     function animate() {
  42.         requestAnimationFrame( animate );
  43.         renderer.render( scene, camera );
  44.     }
  45.     animate();//实时刷新我们的渲染结果
  46.          
  47.    
  48.   </script>
  49. </body>

  50. </html>

复制代码







回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

谢凡社区_C4D&Ae设计交流社区 ( 苏ICP备15030673号-2 )

GMT+8, 2022-9-28 08:39 , Processed in 0.533374 second(s), 23 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表