Three.js（第一节）创建一个小场景

最新推荐文章于 2024-09-28 14:06:20 发布
最新推荐文章于 2024-09-28 14:06:20 发布
阅读量152 收藏
点赞数
文章标签： three.js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49789433/article/details/115676413
版权

第一个three.js场景

下载安装：项目下载地址  https://github.com/mrdoob/three.js

   <script src="./three.js"></script>  //可以使用绝对路径添加

   <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>  //这个地址可以直接使用就不需要下载了

创建一个新的html页面

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

<head>
    <meta charset="UTF-8">
    <title>第一个three.js文件_WebGL三维场景</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* 隐藏body窗口区域滚动条 */
        }
    </style>
    <!--引入three.js三维引擎-->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
</head>

<body>
<script>
    /**
     * 创建场景对象Scene
     */
    let scene = new THREE.Scene();  //绘制了一个场景
    /**
     * 创建网格模型
     */
        // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
    let geometry = new THREE.BoxGeometry(60, 40, 40); //创建一个立方体几何对象Geometry
    // let geometry = new THREE.SphereGeometry(60, 40, 40);    用来创建一个球体
    let material = new THREE.MeshLambertMaterial({
        //材质就是你创建这个物品需要怎么材质的，color是颜色这个是rgb16进制的
        color: 0x5555ff
    });
    let mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中
    /**
     * 光源设置
     */
        //光源，类似于光亮的强度，ffffff比较亮，越小越暗沉，测试之后最暗的是0x000000
    let point = new THREE.PointLight(0x999999);
    point.position.set(400, 100, 30); //点光源位置，这个光是从什么位置打过来
    scene.add(point); //点光源添加到场景中
    //环境光，我代称为纯度吧0xffffff纯度偏低，0x000000纯度较高
    let ambient = new THREE.AmbientLight(0x000000);
    scene.add(ambient);
    /**
     * 相机设置
     */
    let width = window.innerWidth; //窗口宽度
    let height = window.innerHeight; //窗口高度
    let k = width / height; //窗口宽高比
    let s = 100; //缩放比例，数值越大代表相机距离物体越远，数值越小代码距离相机越近
    //创建相机对象
    let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    let 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>

    这个是根据官网的代码，我进行了一些注释的解析，会更方便看一下，多进行练习一下代码就好了，
    直接cv下来先看效果，在选择一部分代码自己修改这样会学习的很快
南玖i
关注
THreeJS 快速入门
weixin_44600183的博客
07-04 384
THreeJS 快速入门
three.js从入门到精通系列教程 - 《three.js第一个3D案例—创建3D场景》
深南大道
01-19 688
【代码】three.js从入门到精通系列教程 - 《three.js第一个3D案例—创建3D场景》
Three.js创建一个场景(Creating a scene)
qq_38853527的博客
09-26 247
My first Three.js appbody { margin: 0; }canvas { width: 100%; height: 100% } src="//wow.techbrood.com/libs/three.r73.js">var scene = new THREE.Scene();var camera = new THREE.Perspect
Three.js 初探 - 微场景制作
weixin_33943347的博客
11-10 255
最近在捣鼓 Three.js 相关, 觉得做一个微场景是一个很不错的选择，结果做下来发现效果还可以。 下面放几张不同角度的效果图 预览地址 luosijie.github.io/threejs-exa… 源码地址 github.com/luosijie/th… 配置较差的设备上预览效果不是很理想, 待优化中 实现过程 接下来大致说明一下实现过程 准备工作 首先你要清楚自己想实现的效果, ...
threejs实现测量模型的体积、表面积、壁厚等功能
Polaris_tl的博客
05-23 2530
需求分析 实现模型的3维测量工作，包括体积、表面积、壁厚等 代码实现 （当前threejs版本 r139） 1、体积的测量 function getVolume(geometry) { if (!geometry.index) return; if (!geometry.isBufferGeometry) { console.log("'geometry' must be an indexed or non-indexed buffer geometry"); retu
Threejs实现绘制地球，地理位置标注、经纬度转换世界坐标threejs坐标
热门推荐
左本Web3D
07-21 1万+
1，介绍 该示例使用的是 r95版本Three.js库。 主要实现功能：绘制地球和地理位置进行标注 效果图如下： 2，主要说明 准备一张地图，创建一个球体并进行贴图，把地理位置经纬度转换成threejs的世界坐标，并进行标注。 创建地球，部分代码如下： // 创建地球 半径100 function createEarth() { var earthGeo = new THREE.SphereGeometry(radius, 50, 50); var earthMate....
three.js室内场景+模型第三人称行走demo
05-21
three.js室内场景+模型第三人称行走demo 跟随模型的第三人称相机控制，以键盘wasd控制模型的行走，以鼠标控制模型的朝向。 具体效果参见：https://blog.csdn.net/u014529917/article/details/106610955
three.js从入门到精通系列教程 - 《three.js第一个3D案例-创建3D场景》
01-19
// 4、加载到网格模型Mesh 例如际生活中有各种各样的物体，在threejs中可以通过网格模型Mesh (opens new window)表示一个虚拟的物体 //（整个过程类似利用椅子外形Geometry和材质MeshBasicMaterial制作出一把椅子...
三维模型-three.js-PCD模型文件，用于three.js显示pcd文件
07-25
在三维可视化领域，Three.js是一个非常流行的JavaScript库，它允许开发者在Web浏览器中创建和展示复杂的3D模型。本资源是关于使用Three.js处理PCD（Point Cloud Data）模型文件的，这是一种常见的3D点云数据格式。在...
three.js迷宫小游戏.zip
06-21
Three.js作为一个强大的JavaScript库，为Web开发者提供了在浏览器中创建交互式3D场景的能力。本教程将详细介绍如何使用three.js来构建一个迷宫小游戏。 首先，了解three.js的核心概念是必要的。Three.js是一个基于...
python文件及os，相对路径与绝对路径
Three123v的博客
10-27 3308
#!/usr/bin/env python # -*- coding:utf-8 -*- #文件操作 # stream=open('E:\\Pycharm\\123.txt') # # # container=stream.read() # print(container) # # # while 1: # result = stream.readline() # if resul...
threejs 02 经验 引入本地文件及js
ZZQsAI的博客
12-17 1246
引入本地文件及js 参考 html相对路径和绝对路径 引入外部的本地JS文件 <script src="../test/11/three.js"></script> <script src="../test/11/STLLoader.js"></script> <script src="../test/11/OrbitControls.js"></script> <script src="../test/11/stats.min.
相对路径绝对化方法
qq_20535249的博客
08-12 219
let a = document.creatElement('a'); a.href = './相对路径'; //设置相对路径 console.log(a.href); //此时输出的内容为绝对路径 http://localhost:63324/myTest/相对路径
得到相对路径_绝对相对路径，百度网盘小案例
weixin_34162851的博客
01-11 212
绝对、相对路径在制作这个小案例之前，我们先来了解一下绝对地址和相对地址绝对地址：在任何情况下，都可以准确找得到的地址(例如我的家乡在山东济宁)相对地址：必须知道当前所在，才能找到的地址(例如我家里我的衣服放在了什么位置)如果我们在一个网址下链接了一个相对路径，那我们点击这个相对路径，就会以网页地址为参考，相对于这个地址进行内部跳转。 百度云盘小案例图片大家可以自己截取一下，...
用three.js写一个小场景
ynweiy的博客
03-31 1221
上次我们用three.js写了一个下雨的动画，主要是用粒子。这次是用three.js搭建了一个小场景。 项目地址依然是：https://github.com/magicsoso/threejs-tutorial.git ，后面three.js的练习demo都放在这里。 作为练习的小项目，这个小场景可以练习： 各种几何体、贴图的运用 导入外部模型 场景与用户交互 简单的动画 调试three.js项目 虽然很简单，但完整地写下来还是挺有收获。 草地场景 场景搭建复用了在下雨动画中的场景模板Template。
【Three.js】一、第一个Three.js项目
MAXLZ的博客
08-29 3478
【Three.js】一、第一个Three.js项目一、Three.js下载 一、Three.js下载 Three.js github:https://github.com/mrdoob/three.js
URI和URL区别以及相对路径和绝对路径的区别
每天迈出一小步!
11-19 5704
一、URL和URI定义：    1.URL是全球资源定位符的英文所写，您平时上网时在IE浏览器中输入的那个地址就是URL。比如：网易 http://www.163.com就是一个URL。    2.URI是Web上可用的每种资源 - HTML文档、图像、视频片段、程序,由一个通过通用资源标志符(Universal Resource Identifier, 简称"URI")进行定位。   
HTML5--裸体回顾
最新发布
金灰的博客
09-28 1343
dl dt dd。
HTML5实现唐朝服饰网站模板源码
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
09-27 1962
HTML5实现唐朝服饰网站模板源码，大作业，毕业设计，唐装网站，服饰网站，网站源码，介绍唐装的由来，分为网站首页，唐装演变，唐装配色，唐装花纹，唐装文化等页面，实现了轮播图、视频、表单、TAB、导航栏、底部栏、列表、图文组合、返回顶部等功能，让你代入唐朝服饰的体验感，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
使用Three.js轻松创建三维场景
"用Three.js创建你的第一个三维场景" 在当今的网络环境中，JavaScript已经成为与用户交互的核心技术之一，而HTML5的出现进一步扩展了其能力。随着HTML5 Canvas的流行，开发者可以创建丰富的视觉效果。然而，对于更...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值