Three.js - 创建第一个三维场景

最新推荐文章于 2021-08-18 19:56:18 发布
VIP文章 最新推荐文章于 2021-08-18 19:56:18 发布
阅读量1k 收藏 3
点赞数 1
分类专栏： threejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ithanmang/article/details/80782663
版权

参考资料是 《three.js开发指南》这本书第一章的示例和讲解。
本示例浏览地址：https://ithanmang.gitee.io/threejs/home/201806/20180623/02-add-animation.html
由下图可以看到，场景中只有一个平面和一个立方体。
这里写图片描述
下面是参考代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渲染并展示三维对象</title>
    <style>
        body {
   
            margin: 0;
            overflow: hidden;
        }
    </style>
    <script src="../libs/jquery-1.9.1.min.js"></script>
    <script src="../libs/build/three.js"></script>

</head>
<body>

<div id="WebGL-output"></div>
<script>

    $(function () {
   

        // 创建场景
        var scene = new THREE.Scene();

        // 创建相机
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);

        // 创建渲染器
        var webGLRenderer = new THREE.WebGLRenderer();

        // 配置相机
        camera.position.set(200, 150, 200);
        camera.lookAt(new THREE.Vector3(0, 0,
最低0.47元/天 解锁文章
「已注销」
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
用Three.js创建你的第一个三维场景
12-13
如今浏览器的功能越来越强大，而且这些功能可以通过 JavaScript 直接调用。你可以用 ...标签轻松地添加视频和音频，而且可以在 ...画布上创建各种交互组件。...这个功能集合里又有了一个新成员，即支持 WebGL 。
使用 ThreeJS 实现第一个三维场景（详）
两个月亮
02-09 1113
在浏览器提供 requestAnimationFrame() API 前，这类工作是通过 setInterval() 函数来进行的。现代浏览器通过 requestAnimationFrame() 函数为稳定而连续的渲染场景提供了良好的解决方案。通过 requestAnimationFrame() 函数，你可以向浏览器提供一个回调函数。你无需定义回调间隔，浏览器将自行决定最佳回调时机。你需要做的是在这个回调函数中完成每一帧的需要进行的绘制操作，然后将剩下的工作交由浏览器处理，浏览器将赋值使场景绘制尽量高效和平
Three.js - 入门教程（基本介绍、创建第一个三维场景）
weixin_43990252的博客
07-19 3985
现代浏览器都支持 WebGL，这样我们就不必使用 Flash、Java 等插件就能在浏览器中创建三维图形。虽然 WebGL 提供的接口非常丰富和强大，但使用起来过于繁琐和复杂。 Three.js 的出现完美地解决了这个矛盾。它提供一个很简单的关于 WebGL 特性的 JavaScript API，使得用户不需要详细地学习 WebGL，就能轻松创作出好看的三维图形样例。 一，基本介绍 1，Three...
Three.js学习笔记（一） 创建你的第一个三维场景
qiaozi的博客
08-28 604
Three.js学习笔记（一） 创建你的第一个三维场景 前言 最近在学习Three.js，记录一下学习过程的笔记。本次笔记主要介绍如何使用three.js实现一个三维场景。主要实现的功能有： 创建一个Three.js场景 使用材质、光源、动画来完善第一个场景 引入辅助库以统计和控制场景 一、 创建一个Three.js场景 <!DOCTYPE html> <html lang=...
使用Three.js 心得系列一 如何创建三维网格
霍城延的随笔
12-16 2374
three.js如何创建三维网格。 官方提供了gridHelper的方式： 先看下我的测试效果： 上源码： 源码为完整的源码，其中包括一个小实例，点击也年的移动按钮，人物会沿着X的方向，前进行走。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试三维图</title> <script src="j.
关于three.js渲染器THREE.WebGLRenderer()参数的介绍和使用
bigpatten的博客
08-18 8810
首先来看下THREE.WebGLRenderer可以设置的参数如下： var renderer = new THREE.WebGLRenderer({ //创建渲染器对象 // canvas: document.getElementById('can3d'), //渲染器绘制其输出的画布， alpha: false, // 画布是否包含alpha（透明度）缓冲区。默认值为false。 premultipliedAlpha: true, //渲染器是否会假设颜色具有 预乘alpha。默
three.js从入门到精通系列教程 - 《three.js第一个3D案例-创建3D场景》
最新发布
01-19
三维场景Scene (opens new window)对象理解为虚拟的3D场景，用来表示模拟生活中的真实三维场景,或者说三维世界（例如一个房间Scene）。 //2、创建一个长方体几何对象Geometry（例如一个椅子外形Geometry） //3、描述...
基于three.js实现的3D粒子动效实例代码
01-19
three.js是用JavaScript编写的WebGL的第三方库，three.js提供了丰富的API帮助我们去实现3D动效，本文主要介绍如何使用three.js实现粒子过渡效果，以及基本的鼠标交互操作。 （注：本文使用的关于three.js的API都是...
THREE.JS开发指南
07-21
首部全面讲解Three.js开发的实用指南，循序渐进讲解Three.js的各种功能，通过大量交互示例，深入探索使用开源...到这章结束的时候，你就可以创建出第一个Three.js场景。你可以直接在浏览器中创建三维场景，并制作动画。
Three.js(webgl) webpack+es6 geojson 3d地图 项目实战视频教程
06-17
Three.js 也是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。Three.js 实战系列，Three.js(webgl) webpack+es6 geojson 3D 地图 项目实战视频教程将制作一个基于...
Three.js学习记录：创建三维场景
weixin_33940102的博客
11-13 354
3D基本原理 为了实现3D图像的动态展示有三个要点： 三维场景包括三维模型、光源、相机三个部分构成。 从最简单的情形来说，三维模型由网格（mesh）和材质（material）组成。网格则一般由若干个图元（一般是空间中的三角形）拼接而成。网格表面还要考虑本身的纹理和对光源的反射情况。所以3D模型的数据主要是顶点信息和网格表面材质信息。光源就...
从0开始搭建基于Three.js的3D场景（1）
熬夜不秃头的博客
08-13 360
Three.js初探
three.js学习（5）：Renderer
无聊de热水的博客
11-19 6311
Renderer渲染器的工作是用来将物体绘制到屏幕上。 1.WebGLRenderer （1）构造函数： WebGLRenderer(parameters：object) –parameters–（可选参数）定义渲染器的行为。 –canvas–提供一个渲染器绘制输出的canvas和DOMElement属性对应。如果没有传这个参数，会创建一个新canvas。 –context – 可用于将渲染器附加...
three.js THREE.WebGLRenderer 参数
蜗牛速度额的博客
09-07 2万+
WebGLRenderer()中有一些参数我们可以设置，以下这些参数来自于官方文档：   antialias: 　　值：true/false 　　含义：是否开启反锯齿，设置为true开启反锯齿。   precision: 　　值：highp/mediump/lowp 　　含义：着色精度选择。   alpha: 　　值：true/false 　　含义：是否可以设置背景色透明。  ...
threejs点击事件
甘乐乐的博客
09-04 1万+
本文链接：https://blog.csdn.net/ithanmang/article/details/80897888 示例浏览地址：https://ithanmang.gitee.io/threejs/home/201807/20180703/02-raycasterDemo.html 双击鼠标左键选中模型并显示信息。 首先，解释一下三种坐标系的概念：场景坐标系（世界坐标系）、屏幕坐标系...
threejs 绘制球体_Three.js基础探寻四——立方体、平面与球体
weixin_42107561的博客
12-23 1103
前面简单介绍了webGL和Three.js的背景以及照相机的设定，接下来介绍一些Three.js中的几何形状。1.立方体虽然这一形状的名字叫立方体(CubeGeometry)，但它其实是长方体，也就是长宽高可以设置为不同的值。其构造函数是：THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegment...
一篇文章教你在三维空间中创建流动线条(three.js实战1)
点燃火柴的博客
06-13 4457
一文教你在三维视图中创建流动线条1.demo效果2. 流动线条实现思路3. 实现要点3.1 定义线条运动轨迹3.2 绘制流动线所需的其他参数3.3 初始化线条3.4 线条流动实现3.5 环形线条函数封装3.6 流动线条函数使用4. demo代码4.1 HTML文件4.2 JS文件 1.demo效果 2. 流动线条实现思路 首先定义一条线段流动的的轨迹线，从这条线上均匀的取若干个点，从这些轨迹点中的某一点开始取若干个点，绘制线条，起始点后移，在取相同的点绘制线条，起始点不断后移，不会绘制线条，就得到流动
Three.js - 设置纹理offset偏移模拟箭头线性流动
ithanmang
10-30 7190
1、效果 通过循环 texture的offset属性值，可以实现，类似字幕的运动，以及箭头的线性流动等效果 2、示例地址 https://ithanmang.gitee.io/threejs/home/201810/20181030/01-texture-offset偏移.html 3、相关属性 该示例使用的是平面网格，然后加上材质贴图，设置纹理重复覆盖THREE.RepeatWrapping 然...
Three.js - 通过 THREE.Raycaster 实现模型选中与信息显示
热门推荐
ithanmang
07-03 3万+
示例浏览地址：http://www.ithanmang.com/threejshome/raycasterDemo.html 双击鼠标左键选中模型并显示信息。 首先，解释一下三种坐标系的概念：场景坐标系（世界坐标系）、屏幕坐标系、视点坐标系。 场景坐标 通过three.js构建出来的场景，都具有一个固定不变的坐标系（无论相机的位置在哪），并且放置的任何物体都要以这个坐标系来确定自己的位置...
three.js入门（二）：三维空间下的直线
05-24
在三维空间中，一条直线可以由两个点确定。我们可以使用 `THREE.Line` 来定义一条直线，并将其添加到场景中。 ```javascript // 创建两个点 var point1 = new THREE.Vector3(-5, 0, 0); var point2 = new THREE....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值