【 three.js-02 】.初始

已于 2024-03-06 16:21:24 修改
阅读量121 收藏
点赞数
文章标签： javascript 开发语言 ecmascript
于 2023-10-26 11:56:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64461654/article/details/134052545
版权

初始项目前，先引入three.js，引入方式请看上一篇文章CSDNicon-default.png?t=N7T8https://mp.csdn.net/mp_blog/creation/editor/134052424

引入three.js完成，那就正式开启three.js之旅吧！

1.初始化场景 

var scene = new THREE.Scene();

2.创建一个模型

var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry

3.添加材质对象Material

 var material = new THREE.MeshLambertMaterial({

        color: 0x00ff00,

      });

4.添加网格模型对象Mesh

var mesh = new THREE.Mesh(geometry, material);

5.网格模型添加到场景中

scene.add(mesh); //网格模型添加到场景中

【注意：光源的设置需要在渲染之前！】

6.点光源

var point = new THREE.PointLight(0x444444); //创建了一个点光源对象

point.position.set(400, 200, 300); //点光源位置

 scene.add(point);//点光源添加到场景中

7.环境光

var ambient = new THREE.AmbientLight(0x444444);

scene.add(ambient);//环境光添加到场景中

8.初始化相机

 var width = window.innerWidth; //窗口宽度

      var height = window.innerHeight; //窗口高度

      var k = width / height; //窗口宽高比

      var s = 150;//类似于相机的缩放距离

//创建相机对象

      var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);

      camera.position.set(200, 300, 200); //设置相机位置

      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

9.初始化渲染器

var renderer = new THREE.WebGLRenderer();

      renderer.setSize(width, height); //设置渲染区域尺寸

      renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色

      document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

10.执行渲染器

renderer.render(scene, camera);

按照以上步骤，实现了这样一个立体的四方体：

案例源码如下：

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <title>1.初始化</title>

    <style>

      body {

        margin: 0;

        overflow: hidden;

        /* //取消滚动条 */

      }

    </style>

    <!-- //引入three.js -->

    <script src="http://www.yanhuangxueyuan.com/threejs/build/three.min.js"></script>

  </head>

  <body>

    <script>

      //【1.初始化场景】

      var scene = new THREE.Scene();

      //【2.创建一个模型】

      var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry

      // 列如：

      //(1)长方体 参数：长，宽，高

      // var geometry = new THREE.BoxGeometry(100, 100, 100);

      //(2)球体 参数：半径60  经纬度细分数40,40

      // var geometry = new THREE.SphereGeometry(60, 40, 40);

      //(3) 圆柱  参数：圆柱面顶部、底部直径50,50   高度100  圆周分段数

      // var geometry = new THREE.CylinderGeometry(50, 50, 100, 25);

      //(4)正八面体

      // var geometry = new THREE.OctahedronGeometry(50);

      //(5)正十二面体

      // var geometry = new THREE.DodecahedronGeometry(50);

      //(6) 正二十面体

      // var geometry = new THREE.IcosahedronGeometry(50);

      //【3.材质对象Material】

      var material = new THREE.MeshLambertMaterial({

        color: 0x00ff00,

      });

      // 【4.网格模型对象Mesh】

      var mesh = new THREE.Mesh(geometry, material);

      // 【5.网格模型添加到场景中】

      scene.add(mesh); //网格模型添加到场景中

      // 【注意：光源的设置需要在渲染之前！】

      // 【6.点光源】

      var point = new THREE.PointLight(0x444444); //创建了一个点光源对象

      point.position.set(400, 200, 300); //点光源位置

      //【6.点光源添加到场景中】

      scene.add(point);

      // 【7.环境光】

      var ambient = new THREE.AmbientLight(0x444444);

      scene.add(ambient);

      // 【8.初始化相机】

      var width = window.innerWidth; //窗口宽度

      var height = window.innerHeight; //窗口高度

      var k = width / height; //窗口宽高比

      var s = 150;

      //创建相机对象

      var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);

      camera.position.set(200, 300, 200); //设置相机位置

      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

      //【9.初始化渲染器】

      var renderer = new THREE.WebGLRenderer();

      renderer.setSize(width, height); //设置渲染区域尺寸

      renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色

      document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

      //执行渲染器

      renderer.render(scene, camera);

    </script>

  </body>

</html>

如果直接看上面的代码不太理解，第一次接触会比较陌生，可以尝试更改代码的参数看看有什么效果，代码的功能都有注释， 看着注释也能大概猜出一个参数的含义。通过修改代码，同时刷新浏览器查看效果形成一个互动来提高自己学习的驱动力。

田田925
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
threejs基础上：初始化
快去创造奇迹
02-25 2544
优先更新个人博客，求关注~~ 个人博客：https://jinglecjy.github.io/ Three.js是一个用于简化webGL编程的3D库，即使在不支持webGL的环境下也能做到优雅降级，以下教程将围绕构建这个地球DEMO来展开。 ThreeJs中最主要的有三个对象场景（scene）、相机（camera）、渲染器（renderer）。scene是布景空间，camera是拍摄镜头，r...
threejs 初始化
god953的博客
11-09 685
threejs 初始化 绘制一个正方形 并运动起来。
three.js教程学习初始化配置
yy_1028的博客
01-20 1111
记录一下学习three.js历程，我用的全是class，这里配置一下基础的class文件，由于目前也在学习ts就用了ts了 文件目录大概如下：common中写基础的配置，objects中写具体实例, scene中写具体逻辑创建调用 Base.ts import { Scene } from "three" export default class Base { instance:any constructor(){} setPosition (x:number,y.
three.js中坐标系转换以及camera的position、lookAt与up属性理解
weixin_50867227的博客
09-01 6794
three.js中坐标系转换以及camera的position、lookAt与up属性理解
three.js-dev-examples-models.zip
08-26
Three.js是一个基于WebGL的JavaScript库，它使得在浏览器中创建3D图形变得简单易行。这个压缩包"three.js-dev-examples-models.zip"包含了与Three.js相关的模型示例，是学习和理解如何在Web环境中加载和展示3D模型的...
three.js-VR展厅.zip
最新发布
06-29
【标题】"three.js-VR展厅.zip"是一个包含使用JavaScript库three.js创建的虚拟现实(VR)展览厅的资源包。这个项目展示了如何利用WebGL技术构建沉浸式3D环境，让用户通过浏览器体验互动式的虚拟展示空间。 【描述】在...
three.js-r141.zip
06-16
《深入探索Three.js-r141：JavaScript 3D库的奥秘》 Three.js，作为WebGL库的领头羊，为JavaScript开发者提供了一种简单而强大的方式，用于在浏览器中创建三维图形和交互式体验。本次我们将深入剖析Three.js的r141...
three.js-master
11-08
在Web开发领域，Three.js是一个非常流行的JavaScript库，专门用于创建和展示3D图形。这个名为"three.js-master"的压缩包包含的是Three.js的官方源码及其所有示例，是学习和理解Three.js核心功能和应用场景的宝贵资源...
three.js-r135.zip
05-12
《深入剖析three.js r135版本：JavaScript三维渲染库的探索之旅》 three.js，作为WebGL库的杰出代表，为开发者提供了便捷的接口，用于在浏览器中创建丰富的3D交互体验。r135版本是这个项目的一个重要里程碑，它包含...
学习Three.js——网格(Mesh)
a13602955218的博客
12-23 1万+
网格 几何体是不能被渲染的，只有几何体和材质结合成网格才能被渲染到屏幕上 常见属性和方法 position:表示网格的绝对位置 设置position的方法有3个： mesh.position.x = x;mesh.position.y=y;mesh.position.z=z mesh.position.set(x,y,z) mesh.position = new THREE.Vector3(x,...
Three.js学习-相机Camera的基本操作(了解向)
qq_41835314的博客
07-01 4751
介绍了相机的两种透视方式，以及相机的基本属性设置，还有简单介绍了轨道控制器的使用。
Three.js获取模型顶点数据
u014291990的博客
10-29 6605
Three.js获取模型顶点数据 通过Three.js访问或获取模型的顶点数据，也就是获得模型绑定几何体的顶点数据，比如一个网格模型Mesh，首先需要通过网格模型的几何体属性Mesh.geometry访问模型对应的几何体，然后查看几何体几何体的类型，对于Three.js而言有两种几何体类型Geometry和BufferGeometry，一般来说Three.js加载外部stl、obj、fbx、GLT...
【ThreeJS基础教程-初识Threejs】1.ThreeJS的HelloWorld
qq_42760477的博客
10-12 1554
three基础教程第一篇，HelloWorld
threejs室内展示漫游
12-21
常见建筑模型加载，模型常见室内效果渲染，室内场景漫游行走，室内家具动态提示。
THREE初始化（场景 相机 渲染器 控制器等）
RumbleWx的博客
08-16 366
THREE
threejs加载obj文件后如何获取其下的mesh的相对位置,解决位置为{0,0,0}的问题，实现OBJ按自身坐标中心旋转；
qq_39186695的博客
12-17 5393
我在网上查了很久没有详细代码。整理了一下 object.children[0].geometry.computeBoundingBox(); var centroid = new THREE.Vector3(); centroid.addVectors( object.children[0].geometry.boundingBox.min, object.children[0].geome...
使用ThreeJs从零开始构建3D智能仓库——第一章（一切的基础）
热门推荐
homula123的博客
09-23 3万+
使用ThreeJs从零开始构建3D智能仓库——第一章写在前面如何实现从最简单的开始，构建地面准备——浏览器跨域设置初始化场景、相机、灯光、渲染器创建地板创建控制器及其他完整的代码结束语 写在前面 最近因为项目需求，需要构建一个3D仓库，能够显示整个仓库的布局以及库内货物的情况。于是刚入职两年的小白我毅然决然接下了这个沉重的任务（手动狗头），但是我并没有任何关于3D开发的经验，于是乎就各种翻书查百度...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值