three.js学习点滴(1) — 创建场景

最新推荐文章于 2024-07-11 10:56:04 发布
最新推荐文章于 2024-07-11 10:56:04 发布
阅读量2.5k 收藏 2
点赞数
分类专栏： three.js 文章标签： three.js webgl 3D
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zwatermelon/article/details/19550069
版权

创建场景直接上代码 ：

<!DOCTYPE html>
<html lang="en">
<head>
<title>CreateScene.html</title>
</head>
<body>
<div id = "container3d"></div>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/Detector.js"></script>
<script src="js/stats.min.js"></script>
<script>

var controls;
var container,stats;
var camera, scene;
var renderer;

var mesh, zmesh, geometry;

var mouseX = 0, mouseY = 0;
var isShowFPS = true;

initScene();
animate();
//初始化场景
function initScene(){
	//场景 
	scene = new THREE.Scene();
	//摄像机
	camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight , 1,20000);
	camera.position.set(0, 180,200);
	
	//控制器
	controls = new THREE.OrbitControls( camera );
	controls.addEventListener( 'change', render );

	//灯光
	var ambientLight = new THREE.AmbientLight(0xffffff);
    scene.add(ambientLight);
	// directional lighting
	var directionalLight = new THREE.DirectionalLight(0xffffff);  //美术场景渲染后，可以不用打这么多灯光了
	directionalLight.position.set(0, 0, 10);
	scene.add(directionalLight);
	
	//three.js自带的几何体(以平面为例)
	plane = new THREE.Mesh(new THREE.PlaneGeometry(500 ,500, 8 , 8 ) , new THREE.MeshBasicMaterial({color : 0x000000 , opacity : 0.25 , transparent : false , wireframe : true}));
	plane.visible = true;
	plane.position.set(-2 , 1,0);
	plane.rotation.set(-Math.PI/2,0,0 );
	scene.add(plane);
	// 容器 
	container = document.getElementById("container3d");
	//渲染器
	renderer = new THREE.WebGLRenderer({antialias:true});
	renderer.setSize(window.innerWidth,window.innerHeight);
	//renderer.setScissor( 200, 200, window.innerWidth, window.innerHeight );
	//renderer.setViewport( 300, 0, window.innerWidth, window.innerHeight );
	container.appendChild(renderer.domElement);
	
	//  显示帧率
	if(isShowFPS){
		stats = new Stats();
		stats.domElement.style.position = 'absolute';
		stats.domElement.style.bottom = '0px';
		stats.domElement.style.zIndex = 100;
		container.appendChild( stats.domElement );
	}

	// SKYBOX/FOG  天空盒子
	//scene.fog = new THREE.FogExp2( 0x9999ff, 0.00025 );  //是否有雾效果
	var materialArray = [];
	materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "textures/skybox/px.jpg" ) }));
	materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "textures/skybox/nx.jpg" ) }));
	materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "textures/skybox/py.jpg" ) }));
	materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "textures/skybox/ny.jpg" ) }));
	materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "textures/skybox/pz.jpg" ) }));
	materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "textures/skybox/nz.jpg" ) }));
	for (var i = 0; i < 6; i++){
	   materialArray[i].side = THREE.BackSide;
	}
	var skyboxMaterial = new THREE.MeshFaceMaterial( materialArray );
	var skyboxGeom = new THREE.CubeGeometry( 2000, 2000,2000, 1, 3, 1 );
	var skybox = new THREE.Mesh( skyboxGeom, skyboxMaterial );
	scene.add( skybox );

	//红小球精灵
	var ballTexture = THREE.ImageUtils.loadTexture("textures/ball.png");

	var ballMaterial = new THREE.SpriteMaterial({map : ballTexture , useScreenCoordinates : true , alignment : THREE.SpriteAlignment.center});
	ballSprite = new THREE.Sprite(ballMaterial);
	ballSprite.scale.set(32,32,1.0);
	ballSprite.position.set(500,500,0);
	scene.add(ballSprite);
	
	//绑定事件
	window.addEventListener( 'resize', onWindowResize, false );
};


function onWindowResize() {

	windowHalfX = window.innerWidth / 2;
	windowHalfY = window.innerHeight / 2;

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize( window.innerWidth, window.innerHeight );
}

function animate() {
	requestAnimationFrame( animate );
	render();
	controls.update();
	stats.update();
}
function render() {
	renderer.render( scene, camera );
}
</script>

</body>
</html>

运行结果 ：


pikaya
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ThreeJS 开发实例
目尽地平线
08-09 2万+
形状和材质 虚线 画虚线： function DrawDashLine(){ var geometry = new THREE.Geometry(); /** * vertexColors: false 关闭使用点颜色来生成线的颜色，这个值默认是false，如果设置为true，那么后面设置的color将不起作用 * ...
webgl之Three.js学习 day6粒子和粒子系统
chengzhaohui18的博客
03-16 749
一、粒子、粒子系统和ParticleBasicMaterial 1.粒子（Particle） 我们可以使用THREE.Particle(material)构造函数手工创建粒子。唯一需要传入的参数是一个材质。该材质可以是Patricle，也可以是ParticleProgramMaterial。 THREE.Mesh的大部分属性都可以用于THREE.Particle。你可以用Position属性...
Three JS 常用方法.
BrandoLv
06-01 622
1. OBJ 文件转换为Three的 JS 文件: python convert_obj_three.py -i aaa.obj -o aaa.js python convert_obj_three.py -i OBJ文件-o 转换后的JS文件 2. 给灯光添加显示位置的线条 scene.add( new THREE.PointLightHelper( pointlight3 ) ); ...
Three.js实现动态天空盒子(附源码)
最新发布
localhost
07-11 333
Three.js实现动态天空盒子(附源码)
Three.js学习总结
前端小白成长记
12-21 2060
一、Three.js基础学习 (1)学习网站：http://www.hewebgl.com http://techbrood.com/threejs/docs/ 官方文档学习：https://threejs.org/examples/ (2)three.js是WebGL的开源框架 three.js代码下载：https://github.com/mrdoob/three.js 在Thre...
three.js 添加viewCUbe/视图控制/视角指示
helloyangkl的博客
02-18 2027
three.js 添加viewCUbe/视图控制/视角指示
three.js中文文档学习之创建场景
10-18
在深入探讨创建场景之前，先理解什么是Three.js至关重要。Three.js是一个JavaScript库，它简化了在Web浏览器中创建和操作3D图形的过程，利用WebGL技术。WebGL是一种基于OpenGL标准的JavaScript API，允许在浏览器中...
three.js拖拽生成场景简单示例
09-06
`threejs.js`是three.js的核心库，提供了3D对象、光照、材质等元素的创建和管理功能；而`OrbitControls.js`是three.js的一个扩展，用于添加轨道控制器，让用户可以通过鼠标或触摸来操控3D视图。 在`index.html`中，...
vue页面引入three.js实现3d动画场景操作
10-14
访问[https://threejs.org/docs/index.html#manual/zh](https://threejs.org/docs/index.html#manual/zh)可以获取更多信息。在实践中不断探索和尝试，你将能够熟练地利用Three.js在Vue项目中构建出令人惊叹的3D交互...
使用three.js搭建室内场景
05-21
使用three.js搭建室内场景 不使用模型倒入，完全使用three.js接口搭建场景 具体效果参见我的博客：https://blog.csdn.net/u014529917/article/details/82801737
Three.js-webgl物联网粮仓3D可视化
03-12
Three.js是一个强大的JavaScript库，专门用于在Web浏览器中创建和展示3D图形。它充分利用WebGL API，使开发者无需深入理解底层复杂的图形编程，就能便捷地构建出引人入胜的3D场景。在这个项目中，Three.js用于构建...
ThreeJS 中显示小窗口
qq_21476953的博客
01-10 2134
参考 ThreeJS 中显示小窗口 这种效果的主要代码: function initStage() { ... // 不要自动清除 renderer.autoClear = false; renderer.setClearColor(0x000000, 0.0); // 创建2个相机 mainCamera, viceCamera ... } // 循环渲染函数 functio...
Threejs 三大组件 -- 场景、相机、渲染器
hb_zhouyj的博客
12-06 1万+
Three.js 中，要渲染物体到网页中，必备3个组件：场景 scene、相机 camera、渲染器 renderer。 场景 scene 场景是所有物体的容器。在Threejs中，场景只有一种，用 THREE.Scene 表示，构建场景如下： var scene = new THREE.Scene(); 场景组件包括： 相机 — 决定哪些东西要渲染到屏幕上 光源 — 对材
three.js 天空盒子使用方法
ChaoQun
08-31 5862
Three.js 天空盒子使用方法研究所谓的天空盒子就是一个超级大的BOX盒子，在渲染手段上使用了skyboxShader而已，这个shader存在于THREE.js库中。 稍微详细一点展开，天空盒子分为六个方形的图片。function makeSkybox( urls, size ) { var skyboxCubemap = new THREE.CubeText
JS 控制VIEWPORT属性，在不同终端类型中兼容自适应显示
kissing7的专栏
04-27 9374
首先你要设置meta viewport属性。 然后再JS代码中设置如下代码 var viewport = document.querySelector("meta[name=viewport]"); var winWidths=$(window).width(); var densityDpi=640/winWidths; densityDpi= densityDpi>1?300*640*d
threejs基础上：初始化
快去创造奇迹
02-25 2547
优先更新个人博客，求关注~~ 个人博客：https://jinglecjy.github.io/ Three.js是一个用于简化webGL编程的3D库，即使在不支持webGL的环境下也能做到优雅降级，以下教程将围绕构建这个地球DEMO来展开。 ThreeJs中最主要的有三个对象场景（scene）、相机（camera）、渲染器（renderer）。scene是布景空间，camera是拍摄镜头，r...
Three.js editor 学习笔记（一）
热门推荐
u013384019的博客
02-01 1万+
最近项目需要用到three.js editor，three.js库虽然较为广泛使用，但editor作为“衍生产品”似乎用户较少，使用方法连官方都资料甚少。此次我就自己关于editor的学习进行一下简单的脉络分析，大家共勉呀。 首先，我对three.js 库不是十分了解，打算从editor开始学习，遇到需要查询的地方再从库中按需求学习。 Editor目录下共有四个目录和两个文件。
Threejs-关于变更的设置
前端
08-30 5931
为了提高性能，threejs默认物体的形状和材质一经创建，就永不改变。 所以，修改物体的形状和材质，就需要手动告诉threejs，方法就是使用各种computeXXX方法和needsUpdate属性。 相机变更 相机位置更新: 需要重新设置相机的位置，还需要重新渲染 camera.position.set(x, y, z); //渲染 renderer.render(scene,...
threejs粒子与粒子系统
知屋安砖
10-16 2099
粒子和粒子系统1. 粒子的创建2. 粒子系统3. 用HTML5画布格式化粒子（1） 在CanvasRenderer类里使用HTML5画布（2） 在WebGLRenderer中使用HTML5画布4. 使用纹理格式化粒子（1） 单个材质（雨滴为例）（2） 多个材质（雪花为例）5. 从高级几何体中创建粒子系统 使用粒子可以模拟出细小的物体，或组成三维模型进行变换。 1. 粒子的创建 首先创建粒子 var...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值