Three.js渲染场景及模型

最新推荐文章于 2024-09-13 14:59:13 发布
最新推荐文章于 2024-09-13 14:59:13 发布
阅读量514 收藏
点赞数 7
分类专栏： three.js 文章标签： javascript 前端 开发语言 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_65325528/article/details/140398841
版权

今天来分享一篇自己的得意之作，哈哈，也不算是作品吧，就是自己当时学习Three.js框架时，自己写的一个小demo。当时学习这个老不容易了，因为算是几年前学习了，网上资料不全，官网Api也不是给我这样的凡人写的，只能靠着那些残缺的小视频，小实例来学习。现在经常不用怕越来越模糊了，今天正好借着CSDN这个平台发一下小笔记，避免一个demo丢失。

主要内容：

  1. 模型的加载（glb/fbx）
  2. 模型加载监听
  3. 添加镜子
  4. 移动动画（TWEEN）插件
  5. 创建2d标签
  6. 添加控制器
  7. 模型的环境周围添加贴纸
  8. 添加海洋效果
  9. 简单的交互效果
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>立体图形</title>
	<script src="./3d/libs/three.js"></script>
	<script src="./3d/libs/js/controls/OrbitControls.js"></script>
	<script src="./3d/libs/js/loaders/FBXLoader.js"></script>
	<script src="./3d/libs/js/loaders/GLTFLoader.js"></script>
	<script src="./3d/libs/js/objects/Reflector.js"></script>
	<script src="./3d/libs/js/lib/inflate.module.min.js"></script>
	<script src="./3d/libs/tween.min.js"></script>
	<script src="./3d/libs/CSS2DRenderer.js"></script>
	<script src="./3d/examples/js/postprocessing/EffectComposer.js"></script>
	<script src="./3d/examples/js/postprocessing/RenderPass.js"></script>
	<script src="./3d/examples/js/postprocessing/OutlinePass.js"></script>
	<script src="./3d/examples/js/shaders/CopyShader.js"></script>
	<script src="./3d/examples/js/shaders/FXAAShader.js"></script>
	<script src="./3d/examples/js/postprocessing/shaderPass.js"></script>
	<script src="./3d/examples/js/objects/Water.js"></script>
	<script src="./3d/examples/js/objects/Sky.js"></script>
</head>
<style>
	/**{ margin: 0; padding: 0;}*/
	#threeContainer {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 0;
		left: 0;
		overflow: hidden;
	}
	#cover {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		align-items: center;
		left: 0;
		z-index: 999;
		background-color: rgba(0, 0, 0, 0.5);
	}
	#cover div {
		height: 30px;
		width: 100%;
		margin: 0 5px;
		text-align: center;
		position: relative;
		transition: all 0.5s;
		color: #ffffff;
		border: 1px solid rosybrown;
	}
	#cover div span {
		height: 100%;
		width: 0;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		display: block;
		opacity: 0.7;
		background-color: rgb(219, 53, 53);
	}
	.label {
		padding: 10px;
		background-color: rgba(236, 216, 34, 0.5);
		color: #03548f;
		display: block;
		border: 2px solid #cc99c5;
		border-bottom-left-radius: 20px;
	}
	.operation{
		width: 100%;
		position: absolute;
		top: 5px;
		display: flex;
		justify-content: start;
		align-items: center;
		left: 0;
		z-index: 40;
		background-color: rgba(55, 135, 150 , 0.3);
	}
	.select{
		margin: 5px 10px;
		width: 100px;
		height: 25px;
		display: inline-block;
		color: #ffffff;
		background-color: sienna;
	}
	.go{
		width: 60px;
		height: 25px;
		cursor: pointer;
		line-height: 25px;
		color: #03548f;
		font-size: 13px;
		text-align: center;
		background-color: burlywood;
	}
</style>

<body>
	<div id="threeContainer"></div>
	<div class="label"></div>
	<div id="cover"></div>
	<div class="operation">
		<select class="select">
			<option>请选择场景</option>
			<option>天空</option>
			<option>星空</option>
			<option>海洋</option>
			<option>平面</option>
		</select>
		<div class="go">点击前进</div>
	</div>
	<script>
		//初始化
		var initial = {
			container: document.getElementById("threeContainer"),
			cover: document.getElementById("cover"),
			clock : new THREE.Clock(),
			scene: null,  //场景
			camera: null,	//相机
			renderer: null,	//渲染
			labelRenderer: null,	//2d渲染
			group: null,		//组一
			group1: null,		//组二
			group3: null,       //组三
			point: null,		//点光源
			ambient: null,		//环境光
			directional: null,	//平行光
			controls: null,		//鼠标控制器
			model: null,		//保存模型
			parent: null,		//保存点击的上一个模型
			defaultMaterial: {
				material_1: new THREE.MeshPhongMaterial({ color: 0x21b9f3, transparent: true, opacity: 0.5 }),
				material_2: new THREE.MeshPhongMaterial({ color: 0x162bef, transparent: true, opacity: 0.5  })
			},
			isFlat: false,		//判断是否要执行点击事件
			composer: null,		//利用插件EffectCompose,给模型添加轮廓线
			water : null        //创建水
		}
		//渲染场景相机
		function rendering() {
			this.clock = new THREE.Clock();
			this.scene = new THREE.Scene();
			this.scene.fog = new THREE.Fog(0xffffff,500,10000);
			this.group = new THREE.Group();
			this.group.name = "group";
			this.group1 = new THREE.Group();
			this.group1.name = "group1";
			this.group3 = new THREE.Group();
			this.group3.name = "group3";
			this.camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
			this.camera.position.set(100, 100, 100);
			this.camera.lookAt(this.scene.position);
			this.renderer = new THREE.WebGLRenderer({ alpha: true });
			this.renderer.setPixelRatio(window.devicePixelRatio);
			this.renderer.setSize(window.innerWidth, window.innerHeight);
			this.renderer.setClearColor(0xcccccc);
			this.renderer.shadowMap.enabled = true;
			this.container.appendChild(this.renderer.domElement)
		}
		//制作灯光
		function lighting() {
			this.point = new THREE.PointLight(0xfffaaf); 
			this.point.position.set(50, 40, 50);
			this.point.name = "point"
			this.ambient = new THREE.AmbientLight(0xffffff, 0.5);
			this.ambient.name = "ambient"
			this.directional = new THREE.DirectionalLight(0xffffff);
			this.directional.name = "directional"
		}
		//往场景中添加东西
		function adding() {
			this.scene.add(this.camera);
			this.scene.add(this.point);
			this.scene.add(this.ambient);
			this.scene.add(this.directional);
		}
		//制作平面矩形
		function CreatPlane() {
			let plane = new THREE.PlaneBufferGeometry(5000, 5000);
			let planeMaterial = new THREE.MeshLambertMaterial({
				color: 0xfffaaa,
				transparent: true,
				opacity: 0.2,
				fog:true
			})
			let mesh = new THREE.Mesh(plane, planeMaterial);
			mesh.position.y = 0;
			mesh.rotation.x = -Math.PI / 2;
			mesh.name = "plane";
			mesh.receiveShadow = true;
			this.group.add(mesh);
			this.scene.add(this.group);
		}
		//添加镜子
		function Reflector() {
			let ReflectorGeometry = new THREE.PlaneBufferGeometry(5000, 5000);
			let ReflectorMaterial = new THREE.Reflector(ReflectorGeometry, {
				clipBias: 1,
				textureWidth: window.innerWidth * window.devicePixelRatio,
				textureHeight: window.innerHeight * window.devicePixelRatio,
				color: 0xffffff,
				recurstion: 1,
				fog:true
			})
			ReflectorMaterial.name = "Reflector";
			ReflectorMaterial.rotation.x = -Math.PI / 2;
			ReflectorMaterial.position.y = -0.2;
			ReflectorMaterial.receiveShadow = true;
			this.group.add(ReflectorMaterial)
			this.scene.add(this.group);
		}
		//加载模型--glb
		function loaders_glb(url) {
			let self = this;
			const div = document.createElement("div");
			const span = document.createElement("span");
			let loader = new THREE.GLTFLoader();
			loader.load("./3d/models/"+url, function (object) {
				self.model = object.scene;
				self.model.traverse(function (child) {
					child.castShadow = true;
				})
				self.model.scale.set(6,6,6);
				self.model.position.y = 0.1;
				self.model.name = "model"
				self.scene.add(self.model);
				DisplayLabel(self.model)
				// label_sprite(self.model.children[0])   //添加sprite标签
			}, onProgress)
			function onProgress(xhr) {
				let percent = parseInt(xhr.loaded / xhr.total * 100);
				if (percent < 100) {
					self.cover.style.display = "flex"
					div.innerHTML = "加载中 ..." + percent + "%";
					span.style.cssText = "width:" + percent + "%;"
				} else {
					self.cover.style.display = "none"
					div.innerText = "";
					span.style.cssText = "width:0px;"
				}
				div.appendChild(span);
			}
			self.cover.appendChild(div)
		}
		//加载模型--fbx
		function loaders_fbx(url) {
			let self = this;
			const div = document.createElement("div");
			const span = document.createElement("span");
			let loader = new THREE.FBXLoader();
			loader.load("./3d/models/"+url, function (object) {
				self.model = object;
				self.model.traverse(function (child) {
					child.castShadow = true;
				})
				self.model.scale.set(6,6,6);
				self.model.position.y = 0.1;
				self.model.name = "model"
				self.scene.add(self.model);
				DisplayLabel(self.model)
				// label_sprite(self.model.children[0])   //添加sprite标签
			}, onProgress)
			function onProgress(xhr) {
				let percent = parseInt(xhr.loaded / xhr.total * 100);
				if (percent < 100) {
					self.cover.style.display = "flex"
					div.innerHTML = "加载中 ..." + percent + "%";
					span.style.cssText = "width:" + percent + "%;"
				} else {
					self.cover.style.display = "none"
					div.innerText = "";
					span.style.cssText = "width:0px;"
				}
				div.appendChild(span);
			}
			self.cover.appendChild(div)
		}
		//鼠标点下
		function onmousedown(event) {
			initial.isFlat = true
		}
		//鼠标移动
		function onmousemove(event) {
			initial.isFlat = false
		}
		//鼠标点起
		function onmouseup(event) {
			const { offsetX, offsetY } = event;
			if (initial.isFlat) {
				raycaster.call(initial, offsetX, offsetY)
			}
		}
		//添加辅助线
		function axisHeiper(initial) {
			var axisHelper = new THREE.GridHelper(500, 500);
			axisHelper.position.y = 0.01;
			initial.scene.add(axisHelper);
		}
		//点击获取模型
		function raycaster(offsetX, offsetY) {
			let self = this;
			let x = (offsetX / window.innerWidth) * 2 - 1;
			let y = (offsetY / window.innerHeight) * 2 - 1;
			var raycaster = new THREE.Raycaster();
			var mousePoint = new THREE.Vector2(x, -y);
			self.composer = new THREE.EffectComposer(self.renderer);
			let renderPass = new THREE.RenderPass(self.scene, self.camera);
			let selectedObjects = [];
			self.composer.addPass(renderPass);
			let outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), self.scene, self.camera);
			outlinePass.edgeStrength = 5;   //包围线的浓度
			outlinePass.edgeGlow = 0.5;	    //边缘线的范围
			outlinePass.edgeThickness = 2;	//边缘线的浓度
			outlinePass.pulsePeriod = 2;	//包围线的闪烁频率
			outlinePass.visibleEdgeColor.set("#25afc2");	//包围线的颜色
			outlinePass.hiddenEdgeColor.set("#190a05");		//被遮挡的边界线的颜色
			self.composer.addPass(outlinePass);
			var effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
			effectFXAA.uniforms["resolution"].value.set(1 / window.innerWidth, 1 / window.innerHeight);
			effectFXAA.renderToScreen = true;
			self.composer.addPass(effectFXAA);
			raycaster.setFromCamera(mousePoint, self.camera);
			let intersects = raycaster.intersectObjects(self.scene.children, true);
			intersects = intersects.filter(intersects => intersects.object.parent.name != null&&intersects.object.parent.name === 'model');
			if (intersects.length != 0) {
				if (parent != null) {
					parent.material = self.defaultMaterial.material_1
				}
				self.defaultMaterial.material_1 = intersects[0].object.material;
				intersects[0].object.material = self.defaultMaterial.material_2;
				parent = intersects[0].object;
				selectedObjects.push(intersects[0].object);
				outlinePass.selectedObjects = selectedObjects
				tween.call(self, intersects[0], 3000)
			} else {
				if (parent == null) {
					return;
				}
				parent.material = self.defaultMaterial.material_1
				parent = null;
				self.composer = null;
				self.composer = null;
				self.model.children.forEach(function(ment,i){
					if(ment.name === "label"){
						self.model.remove(ment)
					}
				})
			}
		}
		//移动动画，创建间隔
		function tween(obj, times) {
			let self = this;
			var bs = obj.point.clone();
			bs.multiplyScalar(2);
			let tween = new TWEEN.Tween(self.camera.position)
				.to({ x: bs.x, y: bs.y, z: bs.z }, times)
				.easing(TWEEN.Easing.Quintic.InOut)
				.onUpdate(function (o) {
					if (o == 1) {
						create_div(self.model, obj)
					}
				})
				.start()
		}
		//创建2d标签
		function create_div(model, obj) {
			model.children.forEach(function(ment,i){
				if(ment.name === "label"){
					model.remove(ment)
				}
			})
			let label = document.createElement("div");
			label.className = "label";
			document.body.appendChild(label);
			let { x, y, z } = obj.object.geometry.boundingSphere.center;
			let labelObject = new THREE.CSS2DObject(label);
			labelObject.name = "label";
			label.innerHTML = obj.object.name;
			labelObject.position.set(x, y, z);
			model.add(labelObject);
		}
		//渲染2d标签
		function render_css(initial) {
			initial.labelRenderer = new THREE.CSS2DRenderer();
			initial.labelRenderer.setSize(window.innerWidth, window.innerHeight);
			initial.labelRenderer.domElement.style.position = "absolute";
			initial.labelRenderer.domElement.style.left = "0px";
			initial.labelRenderer.domElement.style.top = "0px";
			initial.labelRenderer.domElement.style.zIndex = "5";
			initial.container.appendChild(initial.labelRenderer.domElement);
		}
		//添加控制器
		function controls() {
			this.controls = new THREE.OrbitControls(this.camera, this.labelRenderer.domElement);
			this.controls.minDistance = 10;
			this.controls.maxDistance = 800;
			this.controls.target.set(0, 0, 0);
			this.controls.enabled = true;
			this.controls.addEventListener("change",render,false)
		}
		//创建sprite精灵标签
		function label_sprite(obj) {
			let text = obj.name == undefined ? obj.object.name : obj.name;
			let geom = obj.geometry == undefined ? obj.object.geometry : obj.geometry;
			geom.computeBoundingSphere();
			let {x,y,z} = geom.boundingSphere.center.clone().multiplyScalar(3);
			var sprite = makeTextSprite(text, {});
			sprite.center = new THREE.Vector2(0, 0);
			initial.group1.children.push(sprite);
			initial.scene.add(initial.group1);
			sprite.position.set(x,y,z);
		}
		function makeTextSprite(text, params) {
			let fontsize = params.hasOwnProperty("fontsize") ? params.fontsize : 10;
			let borderColor = params.hasOwnProperty("borderColor") ? params.borderColor : "#00aaf2";
			let backgroundColor = params.hasOwnProperty("backgroundColor") ? params.backgroundColor : "#000000";
			let borderWidth = 3;
			const canvas = document.createElement("canvas");
			const ctx = canvas.getContext("2d");
			ctx.save();
			ctx.fillStyle = backgroundColor;
			ctx.font = fontsize + "px 微软雅黑";
			let mic = ctx.measureText(text);
			let width = mic.width + 10;
			let height = (fontsize + (borderWidth * 2));
			canvas.style.cssText = "width:" + width + "px;height:" + height + "px";
			ctx.fillText(text, borderWidth, fontsize + borderWidth);
			ctx.strokeStyle = borderColor;
			ctx.lineWidth = borderWidth;
			ctx.beginPath();
			ctx.moveTo(0, 0);
			ctx.lineTo(width, 0);
			ctx.lineTo(width, height);
			ctx.lineTo(0, height);
			ctx.closePath();
			ctx.stroke();
			ctx.restore();
			let texture = new THREE.Texture(canvas);
			texture.needsUpdate = true;
			texture.wrapT = texture.wrapT = THREE.RepeatWrapping;
			let spriteMaterial = new THREE.SpriteMaterial({ map: texture });
			let sprite = new THREE.Sprite(spriteMaterial);
			sprite.scale.set(60, 20, 1);
			return sprite;
		}
		//页面变动执行方法
		function onResize() {
			let width = window.innerWidth;
			let height = window.innerHeight;
			initial.camera.aspect = width / height;
			initial.camera.updateProjectionMatrix();
			initial.renderer.setSize(width, height);
			initial.labelRenderer.setSize(width, height);
		}
		//点击显示标签
		function DisplayLabel(model){ 
			model.children.forEach((child,index) =>{
				let obj = child;
				// label_sprite(obj);
			})
		}
		//创建贴纸
		function texture(initial,url){
			let path = `./3d/assets/${url}/`;
			let format = ".jpg"
			let ulrs = [
				path+"px"+format,path+"nx"+format,
				path+"py"+format,path+"ny"+format,
				path+"pz"+format,path+"nz"+format
			]
			let CubeTexture = new THREE.CubeTextureLoader().load(ulrs);
			initial.scene.background = CubeTexture;
			return CubeTexture;
		}
		//添加海洋的方法
		function water(initial){
			let waterPlane = new THREE.PlaneBufferGeometry(10000,10000);
			initial.water = new THREE.Water(waterPlane,{
				textureWidth:512,
				textureHeight:512,
				waterNormals:new THREE.TextureLoader().load("./3d/assets/waternormals.jpg",function(texture){
					texture.wrapT = texture.wrapS = THREE.RepeatWrapping
				}),
				sunColor:0xffffff,
				waterColor:0x03548f,
				distortionScale:3.7,
				fog:initial.scene.fog != undefined
			})
			initial.water.rotation.x = -Math.PI / 2;
			initial.water.position.y = 1;
			initial.water.name = "water";
			initial.group.add(initial.water);
			initial.scene.add(initial.group3);
		}
		//选择场景贴纸方法
		function select_texture(initial){
			let select = document.getElementsByClassName("select")[0];
			select.onchange=function(val){
				var v = val.target.value;
				if(v === "天空"){
					texture(initial,"skyboxsun25deg")
				}else if(v === "星空"){
					texture(initial,"MilkyWay")
				}else if(v === "海洋"){
					water(initial)
				}else if(v === "平面"){
					CreatPlane.call(initial);
				}else{
					alert("抱歉，暂时没有")
				}
			}
		}
		//页面渲染
		function render() {
			let time = new THREE.Clock();
			let self = this;
			if(this.labelRenderer &&　this.labelRenderer.render){
				self.labelRenderer.render(self.scene, self.camera);
				self.renderer.render(self.scene, self.camera)
				self.camera.lookAt(self.scene.position)
				TWEEN.update()
				if (self.composer) {
					// self.composer.render();
				}
				if(self.water){
					self.water.material.uniforms['time'].value += 1.0 / 30.0;
				}
			}
		}
		function animate() {
			requestAnimationFrame(animate);
			render.call(initial);
		}
		//所有的点击方法
		function pageClick(initial){
			let go = document.getElementsByClassName("go")[0]
			go.onclick = function(){
				
			}
		}
		//初始化方法
		function init() {
			rendering.call(initial);    //渲染场景相机
			render_css(initial)			//渲染2d场景
			lighting.call(initial);		//设置灯光
			adding.call(initial);		//添加方法
			CreatPlane.call(initial);	//创建平面
			Reflector.call(initial);	//创建镜子
			controls.call(initial);		//创建控制器
			animate.call(initial);		//定时渲染
			// loaders_glb.call(initial,"gltf/model.glb");		//加载模型  call确定方法中的this指向，url为模型的地址
			// loaders_fbx.call(initial,"fbx/model.fbx");
			// axisHeiper(initial);		//创建辅助线
			pageClick(initial)     	    //所有的点击方法`

			select_texture(initial)

			initial.labelRenderer.domElement.addEventListener('mousedown', onmousedown, false)
			initial.labelRenderer.domElement.addEventListener('mousemove', onmousemove, false)
			initial.labelRenderer.domElement.addEventListener('mouseup', onmouseup, false)
			window.addEventListener("resize", onResize, false)
		}
		init()
	</script>
</body>

</html>

各位同胞如何有学Three、cesium这样的群记得拉我一下哦，嘻嘻。

我对三维挺感兴趣的，但是自己学习比较困难，而且里面的绘制扇形啥的，还需要数学，计算机图形学的底子。

我爱吃干果
关注
专栏目录
ThreeJS – 如何提升three.js的渲染效果
奇点的博客
09-02 3184
对象的参数设置非常影响渲染效果要想获得比较好的渲染效果，对可进行以下参数设置。上述设置中，将antialias设置为true表示开启抗锯齿。表示将启用正确的物理灯光。表示使用2倍设备像素点采样，这有利于消除锯齿获得更加高质量的效果。设置这个属性主要是为了在普通计算机显示器或者移动设备屏幕等低动态范围介质上，模拟、逼近高动态范围（HDR）效果。这个属性如果要生效就是需要将hdr贴图作为场景的环境贴图，获取IBL的光照效果。使用hdr贴图作为场景的环境贴图也将大幅度提升场景或者模型的渲染效果。其中。
使用threejs在浏览器中渲染3D场景
08-10
使用three.js在浏览器中渲染3D场景
Three.js 实战【3】—— 城市模型渲染
最新发布
共勉
09-13 990
本文介绍了如何使用Vue 3和Three.js来渲染一个3D城市。首先，简要概述了Vue 3的响应式数据绑定和组合式API的优势，以及Three.js在3D图形渲染中的强大功能。然后，通过详细的步骤讲解了如何搭建项目、创建场景、添加灯光、导入模型等关键操作。接着，深入探讨了如何在Vue 3中使用Three.js进行动画控制和交互处理。最后，总结了使用这种方法的优势，如代码模块化和高性能渲染，并展望了其在可视化领域的应用前景。
three.js之模型
youhebuke225的博客
12-03 1142
点模型线模型网格模型如果设置网格模型的为，所有三角形会以线条的形式绘制出来 位置 位置属性也是一个三维向量对象Vector3，通过模型位置属性，可以设置模型在场景中的位置 的默认值是 平移 使用translate进行平移 沿着自定义的方向移动。 执行、、等方法本质上改变的都是模型的位置属性。 围绕向量旋转 执行模型旋转的方法改变的是表示角度状态的属性或者四元属性，他们都表示角度状态 复制与克隆 three.js大多数对象都有克隆和复制两个方法表示B的属性复制给A 克隆方法 表示返回
Three.js——创建场景、渲染三维对象、添加灯光、添加阴影、添加雾化
HuoZhiyan 的博客
03-31 1105
本文我们初步认识 three.js，并学习如何创建场景、渲染三维对象、添加灯光、添加阴影及添加雾化等...
Three.js模型包
06-23
Three.js模型包,包含各种示例使用模型
three.js提升渲染效果
NOSaac的博客
08-09 655
通常我们都希望渲染出更逼真的效果，有许多技术来改善模型在 Three.js 中渲染后的外观。但请注意，其中一些技术可能会影响性能，而某些技术则取决于您的模型。你必须根据情况进行调整。本文部分内容为Three.js Journey课程的学习笔记这里将采用使用了纹理、法线贴图等的逼真的模型。我们将使用 GLTF 示例模型存储库（）中的飞行头盔（
Three.js渲染GeoJSON.zip
07-13
在IT领域，Three.js是一个非常流行的JavaScript库，用于在Web浏览器中创建3D图形。它利用WebGL技术，使得开发者可以构建丰富的交互式三维场景。本项目“Three.js渲染GeoJSON”聚焦于如何使用Three.js将地理数据...
Three.js3D场景编辑器（vue3版本）
10-18
技术栈： vue3，three.js，vite。 构建的three.js3D场景...<threeView url="/场景模型 (4).zip"></threeView> import {threeView} from 'scene-view/lib' import 'scene-view/lib/style.css' 线上演示环境请私信
三维模型-three.js-PCD模型文件，用于three.js显示pcd文件
07-25
在三维可视化领域，Three.js是一个非常流行的JavaScript库，它允许开发者在Web浏览器中创建和展示复杂的3D模型。本资源是关于使用Three.js处理PCD（Point Cloud Data）模型文件的，这是一种常见的3D点云数据格式。在...
three.js加载json三维模型.zip
11-14
在三维Web开发领域，Three.js是一个非常流行的JavaScript库，它为浏览器提供了强大的3D图形渲染功能。本主题将深入探讨如何使用Three.js加载JSON格式的三维模型，以及与BIM（建筑信息模型）相关的应用。 一、Three....
ThreeJS加载3D模型
08-09
NULL 博文链接：https://18211103738.iteye.com/blog/2172799
ThreeJs-3D模型渲染、3D标签
05-26
ThreeJs、Model、3D、3DRenderer
three.js拖拽生成场景简单示例
09-06
在这个示例中，`index.html`会引入`threejs.js`和`OrbitControls.js`这两个JavaScript文件。`threejs.js`是three.js的核心库，提供了3D对象、光照、材质等元素的创建和管理功能；而`OrbitControls.js`是three.js的一...
three.js 渲染调优，如何提升3d场景更逼真的渲染效果
java之路
03-08 7937
three.js就不介绍了，本章内容主要讲解怎么渲染出更逼真的3d场景效果、渲染出更真实的图片。一般用了three.js的人都想把渲染效果做的更好， 最终效果受很多情况影响，比如材质、灯光、环境、模型质量，还需要结合实际情况调节。从各个地方收集的信息写成笔记。
Three.js 三维模型（一）
hello.reader
07-10 1万+
今天主要给搭建介绍下three.js的基本使用，本篇是基于笔者在16年给做的一个项目的demo版进行讲解的，笔者当时采用Html5和JS进行编写的。可能大家会问有没有vue、React 、angular版的。这些笔者后面有时间的时候一定会给大家介绍。其实编程的本源在于提炼属于自己的哲学思想，不授予任何技术和编程语言的限制。就像给你时间你可以用英语或者世界上任何一种语言写出一篇精美的文章。但是文章的精美并不是他用什么语言编写的，而是他的中心思想。我们要把复杂的问题简单化，删繁就简。
threejs的渲染顺序
Zmikoo学习之路
05-31 950
每个threejs对象都会有一个renderOrder属性，我们可以人为地配置对象A的renderOrder小于B的renderOrder，这样，就算A按照前文的机制因该渲染在B之后，但由于renderOrder的原因，能而改变此规则，让A渲染在B之前。当它发现需要渲染的部分被距离摄像头更近的对象遮挡住的时候，就会不再对其进行渲染。如此，距离摄像头越近的对象就会越被先渲染，距离摄像头越远的对象会被后渲染，这样就能更快发现后面的对象的哪些个点会被遮住，从而避免对该点的渲染计算。
three.js 模型详解和外部模型详解
weixin_50207776的博客
08-27 3091
three.js场景渲染模型，基于项目来说大多数模型都是建模师提供的，three.js建模api有限，无法制作出过于精美和写实的模型，而且代码量过大效率低。 1.three.js建立模型 内置ipa包括很多形状。 更多几何体api可以参考官方文档（http://www.yanhuangxueyuan.com/Three.js/） // 立方体模型 var geometry1 = new THREE.BoxGeometry(100, 100, 100); var material1 =...
Three.js基础入门系列（九）--导入3D模型
热门推荐
技术专家
03-25 1万+
先来学习今天的知识——Three.js导入3D模型 复杂的3D模型（比如制作一个飞机模型）一般都是用第三方建模工具生成，然后加载到Three.js中。 01 常用建模制作工具 3Dmax 链接地址：https://www.autodesk.com.cn/products/3ds-max/overview?referrer=%2Fproducts%2F3ds-max%2Foverview 最常见的3D建模软件，广泛应用于广告、影视、工业设计、建筑设计、三维动画、多媒体制作、
Three.js实现室内场景下模型的第三人称行走
在three.js中，可以通过场景对象的 renderer.render() 方法来渲染场景，而在渲染之前可以使用模型的 translateX() 或 translateY() 方法来更新模型在场景中的位置，根据用户按下的wasd键来实现相应的移动。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值