ThreeJS入门篇（3）-HelloWord规范化重构

最新推荐文章于 2024-09-18 14:41:15 发布
最新推荐文章于 2024-09-18 14:41:15 发布
阅读量479 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 数字孪生之WEB三维可视化技术ThreeJS 文章标签： threejs web3d 3D开发
本文为博主牟云飞原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/myfmyfmyfmyf/article/details/112603090
本文对ThreeJS的HelloWord示例进行了面向对象的重构，将三维场景分解为10个独立部分：场景、相机、物体、光源、视角控制、物体交互、渲染、特效处理和各种辅助功能。通过这种方法，便于理解和维护代码，为后续的3D开发示例奠定基础。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

上一节中讲到了第一个示例HelloWord，但是这个示例代码很乱，不成体系也不方便后期修改，我们采用面向对象的思想对原示例进行整理，每一个三维场景都可以理解成人拿着相机对一个物体进行拍摄，我们对三维场景进行客观描述有：

  • 场景 initScene
  • 相机 initCamera
  • 物体 initObject
  • 光源 initLight

在行为交互事件上有：

  • 视角控制 initControls
  • 物体交互控制 initFunc
  • 渲染成像 render
  • 特效处理 initComposer
     

为了方便研发还有

  • 坐标辅助线、视角辅助线、网格辅助线等等辅助功能 initHelper
     

所以将其整理成10个独立的部分，这也是之后所有示例的基础版本，每个示例对这10个方法进行不同的填充

示例代码如下，基本上比较炫的场景动画都离不开这10个方法：


                

        

    

    
  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
            

        


    



                



	

		

			

				
					
ThreeJS入门篇（2）—HelloWord

				
			

			

				

					牟云飞的博客
				

				

					01-13
					
					886
					
				

			

		

		

			
				
一个好的Web3D场景开发

自创模型太难，外部模型太复杂（3D max、maya、 sketchup ）；

模型需要优化，太大会导致加载时间过长，需要与模型方沟通；

现阶段所有的模型都是用别人优化过得，只尝试优化过3D MAX。
...

			
		

	



                

            
              



	

		

			

				
					
Vue 44 ，three.js 1 ，如何使用three.js，如何在Vue中使用three.js，three.js新手教学（three.js使用详细，three.js创建3d物体）

				
			

			

				

					NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.csdn.net）
				

				

					03-27
					
					4637
					
				

			

		

		

			
				
⭐Three.js 是一个强大的JavaScript库，它封装了WebGL的复杂性，使得开发者能够更轻松地在网页上创建和展示三维图形。凭借其直观的API设计以及丰富的功能集，Three.js 已经成为构建沉浸式3D体验、游戏、虚拟现实项目等的首选工具之一。从基本的几何体到复杂的动画效果，再到高级的物理模拟，Three.js 提供了一站式的解决方案来满足各种3D开发需求。
得益于其活跃的社区支持及持续不断的更新迭代，Three.js 在GitHub上的受欢迎程度与日俱增，已经积累了超过90,000颗星标

			
		

	



              


  
              

                


	

		

			

				
					
ThreeJs之HelloWord

				
			

			

				

					苜蓿花乐园
				

				

					12-11
					
					187
					
				

			

		

		

			
				
Threejs是一款运行在浏览器的基于JavaScript的WebGL三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。提供了非常多的3D显示功能。

			
		

	





	

		

			

				
					
Threejs入门3-helloword

				
			

			

				

					空谷足音的博客
				

				

					01-03
					
					480
					
				

			

		

		

			
				
1.目录搭建

js:存放js逻辑目录

libs: threejs类库

images:图片

index.html入口



2. 制作一个旋转的立方体



3.代码详解

a.index.html

引入下载好的threejs类库以及自定义的main.js


<!DOCTYPE html>
<html>
<head>
    <title>...

			
		

	



		

			
		



	

		

			

				
					
threejs 开始第一天 hello world？

				
			

			

				

					zhanglu911026的博客
				

				

					03-06
					
					694
					
				

			

		

		

			
				
参考：

http://www.hewebgl.com/article/getarticle/27

我想threejs是啥这个网站上的介绍肯定比我要说的好的多，可以多看看这个。

不过作为一个一直耕耘在pc端的三维程序员我想更多的关注在是否有一天bs和云渲染、分布式渲染能够kill pc端的大部分实现。



写个hello world！居然失败了，后来发现 相机的lookat（）是一个 th...

			
		

	





	

		

			

				
					
【ThreeJS基础教程-初识Threejs】1.ThreeJS的HelloWorld

				
			

			

				

					qq_42760477的博客
				

				

					10-12
					
					2274
					
				

			

		

		

			
				
three基础教程第一篇，HelloWorld

			
		

	





	

		

			

				
					
dwr入门 -- 02 -- HelloWord解释&&使用javabean

				
			

			

				

					03-21
				

			

		

		

			
				
 <script src="/dwr/interface/HelloWorld.js">    HelloWorld.sayHello(function(response) {  document.getElementById(&#39;greeting&#39;).innerHTML = response;  });    <div id="greeting"></div>  ```  当页面加载时...

			
		

	





	

		

			

				
					
OTA-helloword

					
最新发布

				
			

			

				

					12-10
				

			

		

		

			
				
ota用的bin文件

			
		

	





	

		

			

				
					
Three.js入门之hello world以及如何绘制线

				
			

			

				

					12-09
				

			

		

		

			
				
前言
本文属于学习Three.js 的入门教程，文中通过示例介绍了hello world和线的实现，下面话不多说了，来一起看看详细的介绍吧。
hello world
首先使用我们先用three.js创建一个立方体的hello world类型的案例。

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scal

			
		

	





	

		

			

				
					
threejs基本使用方法

				
			

			

				

					伪成年的博客
				

				

					03-23
					
					1736
					
				

			

		

		

			
				
1、基本使用案例
import * as THREE from "three";
//有些功能需要单独引入，如下：
//1、轨道控制器，可以使得相机围绕目标进行轨道运动。
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
//2、第一人称控制器
import { FirstPersonControls } from 'three/examples/jsm/controls/FirstPersonContro

			
		

	





	

		

			

				
					
threejs第二天 把上一次的helloworld写上

				
			

			

				

					zhanglu911026的博客
				

				

					03-06
					
					312
					
				

			

		

		

			
				
发现一个问题，相机注视目标必须用 three.vector3,否则相机不知道lookat谁去了！

上代码：


&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
   

			
		

	





	

		

			

				
					
Three.js 学习笔记

				
			

			

				

					SSophia的博客
				

				

					09-18
					
					788
					
				

			

		

		

			
				
Three.js是一款基于原生WebGL封装的Web 3D库，向外提供了许多的接口。
它可以运用在在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域。

			
		

	





	

		

			

				
					
three.js导入 glb模型颜色变暗

				
			

			

				

					宏斌的博客
				

				

					01-18
					
					6772
					
				

			

		

		

			
				
渲染器加
renderer.outputEncoding = THREE.sRGBEncoding;

纹理加
/**
 * Textures
 */
const bakedTexture = textureLoader.load('baked.jpg')
bakedTexture.flipY = false
bakedTexture.encoding = THREE.sRGBEncoding






			
		

	





	

		

			

				
					
three.js学习笔记(十三)——真实渲染

				
			

			

				

					hongsir的博客
				

				

					12-18
					
					9758
					
				

			

		

		

			
				
初始场景
只有一个测试白球和gui面板

设置
把球体材质改为标准网格材质MeshStandardMaterial，再添加平行光
const directionalLight = new THREE.DirectionalLight('#ffffff',1)
directionalLight.position.set(0.25,3,-2.25)
scene.add(directionalLight)

gui.add(directionalLight, 'intensity').min(0).max(10)

			
		

	





	

		

			

				
					
three.js | 实战踩坑之旅

				
			

			

				

					zerobiu的博客
				

				

					06-02
					
					663
					
				

			

		

		

			
				
使用render.outputEncoding = THREE.sRGBEncoding的相关问题

			
		

	





	

		

			

				
					
three.js官网的第一个案列代码解读

				
			

			

				

					weixin_50379372的博客
				

				

					07-06
					
					622
					
				

			

		

		

			
				
three.js官网的第一个案列代码解读three.js官网的第一个案列代码解读three.js官网的第一个案列代码解读three.js官网的第一个案列代码解读three.js官网的第一个案列代码解读

			
		

	





	

		

			

				
					
使用Three.js 心得系列一 如何创建三维网格

				
			

			

				

					个人的工作随笔和日记，主要作为一个记录风向平台
				

				

					12-16
					
					2698
					
				

			

		

		

			
				
three.js如何创建三维网格。

官方提供了gridHelper的方式：

先看下我的测试效果：



上源码：

源码为完整的源码，其中包括一个小实例，点击也年的移动按钮，人物会沿着X的方向，前进行走。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试三维图</title>
	<script src="j.

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
牟云飞

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值