three.js 订阅
three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。 展开全文
three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。
信息
提    供
3D显示功能
编    写
JavaScript
中文名
three.js
属    性
3D 引擎
scanf函数原型
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。不过,这款引擎还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏)three.js的代码托管在github上面。
收起全文
精华内容
下载资源
问答
  • Learning.Three.js.The.JavaScript.3D.Library.for.WebGL Learning.Three.js.The.JavaScript.3D.Library.for.WebGL
  • 本书针对 Three.js 的几个重要话题分章节介绍。 第 1 章介绍 Three.js 和 WebGL 的背景资料,并通过简单的例子帮助读者实现第一个Three.js 应用。 第 2 章介绍照相机的设定。 第 3、4、5 章分别介绍几何形状、材质和...
  • Three.js Three.js构建。 执照
  • Haxe externs for three.js 关于 Haxe externs for (版本57)。 这些外部因素由Laurent Bedubourg和John ...常规用法将嵌入Three.js精简版javascript: haxe -lib three.js ... 调试编译将嵌入非最小化的java
  • three.js.sourcecode three.js原始注解
  • three.js3D网页引擎主库文件。仅three.js库。
  • 图形库“Three.js using WebGL”: ://threejs.org/ 来自three.js的代码示例: : Three.js 食谱章节:1、3、10 TrackballControls 库,允许与鼠标交互。 图像资产 所有图片资源均来自无版权站点: : 注释 为...
  • Bower的Three.js Bower上的官方太大,因此我从该存储库中挑选了文件。 当前版本: 。 在此版本库中,该版本将语义版本转换为0.72.0 ,以便Bower能够识别。 用法 在您的bower.json : "dependencies": { ... ...
  • three.js-demo 演示形式的three.js演示 用 引导程序和three.js
  • 3.在需要定义three对象的js文件头写入import * as THREE from '../js/three.module.js';路径为自己的three.module.js文件的路径,这样就可以自动提示three.js中的函数和方法 二。基本组件 1.场景var scene = new ...
  • Three.js研究的片段 #1简单粒子 #2 ShaderMaterial与照明 #3 GPGPU生活游戏 #4背景着色器 ... https://aadebdeb.github.io/study-three.js/raymarching-with-threejs-camera.html #9与烟雾和鼠标的
  • Three.js Tilemap Three.js Tilemap 实验
  • three.js开发必备(内附开发指南和three.js多版本)。包内文件:three.min.js多版本.zip和THREE.JS开发指南.pdf
  • 沙盒Three.js three.js的示例代码 样品清单 p01立方体 网格显示基础 p02世界 各种网格显示和布置 p03粒子 颗粒状显示 p04从bvh加载并播放 使用bvh文件播放动画 p05效果编辑器的像素着色器 Effect Composer用法示例 ...
  • 一个全交互事件管理器,帮助three.js绑定交互事件更加简单 安装 npm install -S three.interaction 用法 import { Scene , PerspectiveCamera , WebGLRenderer , Mesh , BoxGeometry , MeshBasicMaterial } from '...
  • three.js-only three.js代码仅回购
  • Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D,本文介绍下THREE.JS基础/浏览器支持/设置场景/构建网格表面/材质/光/渲染循环/通用的对象属性等等,感兴趣的朋友可以了解...
  • Three.js是基于原生WebGL封装运行的三维引擎,在所有WebGL引擎中,Three.js是国内文资料最多、使用最广泛的三维引擎。
  • Three.js-研究 学习Three.jsThree.js是开源图形库 成员 阿凡达 名称 角色 活动 制作者 图表来自: : 编码约定 多变的 type_noun ex)div_content type_roleNoun() ex)int_switchHome type_roleAdjectiveNoun...
  • Three.js引导程序 更新为使用Three.js(r73)。 添加了一种在新窗口中将画布数据导出为PNG的方法。 窗口聚焦时,按“ p”键。 添加了一个简单的凹凸贴图。 基于示例代码的简单引导程序。 包含所有HTML,JS和CSS,...
  • 用于Three.js JavaScript 3D库的交互式即插即用调试器和检查器。 UDM yarn add three three-x3 npm install three three-x3 import * as THREE from 'three' ; import { OrbitControls } from 'three/examples/...
  • three.js游戏 使用three.js射击游戏开发 构建设置 npm install bower install tsd install 开始 npm start
  • 我的three.js草图 该存储库包含我的草图; 基本上,我使用该库创建的任何东西都觉得很酷! 它们都显示在 :backhand_index_pointing_right: :backhand_index_pointing_left: 。 :star: 强调 以查看我所有的草图! ...
  • threejs_include=path/to/three.js :在生成的输出中包括three.js javascript源文件。 如果未指定路径,则使用three.hx/lib/three.js (如果设置了-D debug则使用three.min.js )。 three_jsRequire :使用js...
  • mixamo-three.js 使用Mixamo模型和动画进行Three.js测试
  • threejs-tutorial 从今天 2020年11月27日 开始学习和探索 Three.js 。 以下内容更新于 2021.04.16 特别提醒: 本教程最开始使用的是 r123 版本,但是后来 Three.js 更新到 r125 版后,r125 中做了一些修改,将 ...
  • Three.js】一、第一个Three.js项目

    千次阅读 2019-08-29 08:45:42
    Three.js】一、第一个Three.js项目一、Three.js下载 一、Three.js下载 Three.js github:https://github.com/mrdoob/three.js

    【Three.js】一、第一个Three.js项目

    一、Three.js下载

    Three.js github:https://github.com/mrdoob/three.js

    一个WebGL程序包含三大基本对象:场景(sence)、摄像机(camera)、渲染器(renderer)。场景是一个容器,用来保存要渲染的物体与光源。射摄像机用来调整物体视角。渲染器的作用是基于摄像机定义的角度去渲染计算物体的位置。

    二、一个Three简单例子

    import './index.styl';
    import * as THREE from 'three';
    import Stats from 'stats-js'; // 检测动画运行时的帧数
    import * as dat from 'dat.gui'; // 用于创建右上角控制器
    
    window.onload = init();
    var scence;
    var camera;
    var renderer;
    function init() {
        var stats = initStats();
        var controls = new function () {
            this.rotationSpeed = 0.02;
            this.bouncingSpeed = 0.03;
        }
        var gui = new dat.GUI();
        gui.add(controls, 'rotationSpeed', 0, 0.5);
        gui.add(controls, 'bouncingSpeed', 0, 0.5);
        // 创建场景
        scence = new THREE.Scene();
        // 创建相机
        camera = new THREE.PerspectiveCamera(
            45,
            window.innerWidth/window.innerHeight,
            0.1,
            1000);
        // 创建渲染器
        renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(0xEEEEEE, 1.0);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true;
        // 轴
        var axes = new THREE.AxisHelper(20);
        scence.add(axes);
        var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
        var planeMaterial = new THREE.MeshLambertMaterial({
            color: 0xffffff
        });
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    
        plane.rotation.x = -0.5*Math.PI;
        plane.position.x = 15;
        plane.position.y = 0;
        plane.position.z = 0;
        plane.receiveShadow = true;
    
        var cubeGeometry = new THREE.BoxGeometry(4,4,4);
        var cubeMaterial = new THREE.MeshLambertMaterial({
            color: 0xff0000
        });
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.position.x = -4;
        cube.position.y = 5;
        cube.position.z = 0;
        cube.castShadow = true;
    
        var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
        var sphereMaterial = new THREE.MeshLambertMaterial({
            color: 0x7777ff
        });
        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
        sphere.position.x = 20;
        sphere.position.y = 4;
        sphere.position.z = 2;
        sphere.castShadow = true;
    
    
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 40, -15);
        spotLight.castShadow = true;
        spotLight.shadow.mapSize = new THREE.Vector2(1024,1024);
        spotLight.shadow.camera.far = 130;
        spotLight.shadow.camera.near = 40;
    
        scence.add(plane);
        scence.add(cube);
        scence.add(sphere);
        scence.add(spotLight);
    
        var ambienLight = new THREE.AmbientLight(0x353535);
        scence.add(ambienLight);
    
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scence.position);
        document.getElementById('WebGL-output').appendChild(renderer.domElement);
        renderer.render(scence, camera);
    }
    
    function initStats(){
        var stats = new Stats();
        stats.showPanel(0);
        document.getElementById('Stats-output').appendChild(stats.domElement);
        return stats;
    }
    
    

    在这里插入图片描述
      上面代码创建了一个平面(plane)、一个立方体(cube)、一个球体(sphere),并建立了一个坐标轴(axes),spotLight是创建的光源,用来产生阴影,ambienLight用来定义环境光。关于坐标轴:红色是x轴,绿色是y轴、蓝色是z轴。
      为了让立方体与小球产生动画效果,添加如下代码:

    var step = 0;
    function renderScence() {
    	stats.update();
    	// 立方体旋转
    	cube.rotation.x += controls.rotationSpeed;
    	cube.rotation.y += controls.rotationSpeed;
    	cube.rotation.z += controls.rotationSpeed;
    	// 小球跳动
    	step += controls.bouncingSpeed;
    	sphere.position.x = 20 + (10 * Math.cos(step));
    	sphere.position.y = 2 + (10* Math.abs(Math.sin(step)));
    	requestAnimationFrame(renderScence);
    	renderer.render(scence, camera);
    }
    

    renderer.render(scence, camera)改为renderScence(),小球会做一个循环的抛物运动而立方体则自动旋转:
    在这里插入图片描述
    完整示例:https://github.com/MAXLZ1/threejs_demo

    展开全文
  • 一个JavaScript库,用于将BOM(二进制对象/材料)文件导入three.js。 加载的资产将作为THREE.Mesh输出,该THREE.Mesh由THREE.BufferGeometry和关联的THREE.Material组成。 每种材质可以将多材质资产分为三个THREE....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 75,996
精华内容 30,398
关键字:

three.js