three.js (3D)前端页面渲染初识three.js

最新推荐文章于 2024-02-20 09:53:43 发布

three小白白

最新推荐文章于 2024-02-20 09:53:43 发布

阅读量1.3k

点赞数

文章标签： html5 javascript html three.js

本文链接：https://blog.csdn.net/weixin_50207776/article/details/119895535

版权

近期进行了关于three.js 的产品展示项目，利用js基础初学了three.js，网络关于three.js的知识过于稀少，利用csdn记录笔记和分享。

//都是个人笔记和个人总结（仅供参考）

1.初识three.js

three.js的基本构成分为，画布，相机，控制器，模型，渲染器。5个元素组成了一个基本的场景。

2.每个元素的关联关系。

画布（Scene）也可以称之为现场。作为一个three场景的容器，类比为一个box（摄影棚），将其他元素装载在其中。

相机（Camera），用来代替人的眼睛，对scene中的内用进行投影或者说映射。相机也分为多种投影方式：正交投影和透视相机，，，，后期再详解。

控制器（control）：three.js内置的api，用来对模型进行缩放，平移，旋转等动作效果，主要通过鼠标和键盘进行操控。其中的操控原理其实是对相机的具体操控。（以后分析具体原理）

模型：通俗的解释就是相机的拍摄对象，模型可以是各种各样的，可以分为通过three.js 自己制作的简单模型和建模师制作的外部模型。外部模型需用通过加载器引入到我们搭建的场景中。

渲染器（render）：将相机拍摄的内容在h5界面上进行渲染，是一种渲染器。

3.熟悉一下基础场景（看看了解就好，后面详解）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>初识three场景</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;//取消滚动条
    }
  </style>
  //引入three.js(网络地址于郭隆邦文档提供)
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
  <!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
</head>

<body>
  <script>
    //初始化场景
    var scene = new THREE.Scene();
    //创建一个模型（矩形）
    // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
    var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
    var material = new THREE.MeshLambertMaterial({
      color: 0x0000ff
    }); //材质对象Material
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中
    //光源设置
    //点光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); //点光源位置
    scene.add(point); //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);
    // console.log(scene)
    // console.log(scene.children)
    //初始化相机
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 200; 
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    //初始化渲染器    
    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>

three小白白

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
three.js (3D)前端页面渲染初识three.js

近期进行了关于three.js 的产品展示项目，利用js基础初学了three.js，网络关于three.js的知识过于稀少，利用csdn记录笔记和分享。//都是个人笔记和个人总结（仅供参考）1.初识three.js three.js的基本构成分为，画布，相机，控制器，模型，渲染器。5个元素组成了一个基本的场景。...
复制链接

扫一扫