Three.JS--Scene

最新推荐文章于 2024-04-04 16:26:29 发布
最新推荐文章于 2024-04-04 16:26:29 发布
阅读量343 收藏
点赞数
<!DOCTYPE html>
<html>
<head>
    <title>Scene</title>
    <script type="text/javascript" src="../libs/three.js"></script>
    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="Stats-output"></div>
<div id="WebGL-output"></div>
<script type="text/javascript">
    function init() {

        var stats = initStats();

        var scene = new THREE.Scene();    //创建场景
        //scene.fog=new THREE.FogExp2( 0xffffff, 0.015 );
        scene.fog = new THREE.Fog(0xffffff, 0.015, 100);
       //创建透视相机
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
      //创建渲染器
        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));      //清除颜色
        renderer.setSize(window.innerWidth, window.innerHeight);    //渲染器大小
        renderer.shadowMapEnabled = true;              //阴影

        var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);            //  平面几何
        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});       //平面材质
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.receiveShadow = true;                                             //可接收阴影

        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 0;
        plane.position.y = 0;
        plane.position.z = 0;

        scene.add(plane);
//相机定位
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);
//环境光
        var ambientLight = new THREE.AmbientLight(0x0c0c0c);
        scene.add(ambientLight);
//点光源
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        spotLight.castShadow = true;
        scene.add(spotLight);

        document.getElementById("WebGL-output").appendChild(renderer.domElement);


        var step = 0;
//控制器
        var controls = new function () {
            this.rotationSpeed = 0.02;
            this.numberOfObjects = scene.children.length;

            this.removeCube = function () {
                var allChildren = scene.children;
                var lastObject = allChildren[allChildren.length - 1];
                if (lastObject instanceof THREE.Mesh) {
                    scene.remove(lastObject);
                    this.numberOfObjects = scene.children.length;
                }
            };

            this.addCube = function () {

                var cubeSize = Math.ceil((Math.random() * 3));
                var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
                var cubeMaterial = new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff});
                var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
                cube.castShadow = true;

                // position the cube randomly in the scene
                cube.position.x = -30 + Math.round((Math.random() * planeGeometry.parameters.width));
                cube.position.y = Math.round((Math.random() * 5));
                cube.position.z = -20 + Math.round((Math.random() * planeGeometry.parameters.height));

                scene.add(cube);
                this.numberOfObjects = scene.children.length;
            };


            this.outputObjects = function () {
                console.log(scene.children);
            }
        };


        var gui = new dat.GUI();
        gui.add(controls, 'rotationSpeed', 0, 0.5);
        gui.add(controls, 'addCube');
        gui.add(controls, 'removeCube');
        gui.add(controls, 'outputObjects');
        gui.add(controls, 'numberOfObjects').listen();


        render();


        function render() {
            stats.update();

            scene.traverse(function (e) {
                if (e instanceof THREE.Mesh && e != plane) {


                    e.rotation.x += controls.rotationSpeed;
                    e.rotation.y += controls.rotationSpeed;
                    e.rotation.z += controls.rotationSpeed;
                }
            });

            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }


        function initStats() {

            var stats = new Stats();

            stats.setMode(0); // 0: fps, 1: ms

            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;
        }
    }
    window.onload = init

</script>
</body>
</html>
十一T_T
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
scenejs-timeline:sc @scenejstimeline是代表Scene.js的时间轴的组件。 您可以控制时间，属性和项目
05-10
Scene.js时间轴 @ scenejs / timeline是代表时间表的您可以控制时间，属性和项目。 / :gear: 安装 $ npm i @scenejs/timeline < script src =" https://daybrush.com/scenejs-timeline/release/latest/dist/timeline.pkgd.min.js " > </ script > :rocket: 如何使用 import Scene from "scenejs" ; import Timeline , { SelectEvent } from "@scenejs/timeline" ; const scene = new Scene ( { ... } ) ; const timeline = new Timeline ( scene , document . body
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』场景 Scene
weixin_39415598的博客
06-10 1248
theme: smartblue 持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第17天，点击查看活动详情 本文简介 点赞 + 关注 + 收藏 = 学会了 在阅读本文前，我希望你对 Three.js 有一个初步的理解。如果你不清楚 Three.js 是什么，我推荐你先阅读 『Three.js』起飞！ 在使用 Three.js 的前，必须先了解 3大组件：摄像机、...
Threejs开发笔记之二场景与基本组件
kevin.yau
09-02 1527
Scene场景的组件包括三种相机：决定哪些东西将要显示在屏幕上渲染 光源：它们对材质如何显示，以及生产阴影是材质如何产生影响 物体（Mesh对象）：它们是在相机视图里主要的渲染对象：方块、球体等 Scene就是这些对象的容器。（Mesh对象）是区别相机和光源对象的方法，可以这样判断是不是Mesh对象if (lastObject instanceof THREE.Mesh) 场景函数变量 sce
学习Three.js——场景（Scene）
a13602955218的博客
12-11 2783
构造函数 var scene = new THREE.Scene() 方法 add(object):向场景中添加对象 remove(object):向场景中删除对象 getObjectByName(name,recursive):根据name查找指定的对象，recursive为false时，向子元素查找，recursive为true时，向所有后代元素查找 traverse(function):使用...
Three.js——scene场景、几何体位置旋转缩放、正射投影相机、透视投影相机
最新发布
HuoZhiyan 的博客
04-04 2125
本篇文章我们学习scene场景的相关方法和属性，认识如何对几何体进行位置、旋转和缩放操作，并简单了解正射投影相机和透视投影相机...
three.js-r133.zip
06-16
《深入探索Three.js-r133：JavaScript 3D库的奇妙世界》 Three.js，作为WebGL库的杰出代表，为JavaScript开发者提供了一个简单易用的接口，用于在浏览器中创建令人惊叹的3D图形。这个名为"three.js-r133.zip"的...
three.js-r136.zip
05-13
Three.js的核心在于它的场景（Scene）、相机（Camera）和渲染器（Renderer）。场景是3D世界的容器，可以包含几何体、材质、灯光等元素；相机则定义了观察3D世界的角度和方式；渲染器负责将场景中的元素绘制到网页上...
three.js-r141.zip
06-16
《深入探索Three.js-r141：JavaScript 3D库的奥秘》 Three.js，作为WebGL库的领头羊，为JavaScript开发者提供了一种简单而强大的方式，用于在浏览器中创建三维图形和交互式体验。本次我们将深入剖析Three.js的r141...
three.js-master.zip
08-04
Three.js是一款强大的JavaScript库，专为在Web浏览器中创建交互式3D图形而设计。它提供了丰富的API和工具，使得开发者无需深入理解底层的WebGL技术，也能轻松构建出引人入胜的3D视觉效果。"three.js-master.zip"这个...
scenejs-4.2.0
06-28
SceneJS专门用于快速绘制大量单独连接的对象，而没有像阴影、反射等游戏引擎效果。 换句话说，它是针对计算机辅助设计的要求。 因此，它比Three.js、GLGE和PhiloGL具有更小的灵活性。 然而，它确实有一个纯JSONAPI，人们已经发现它与Ajax、解析器和数据库(例如CouchDB)集成得很好。
ThreeJS入门——场景(scene)、相机(camera)、渲染器(renderer)
xyphf的博客
11-28 5145
ThreeJS官网Three.js – JavaScript 3D Library ThreeJS的三要素——场景(scene)、相机(camera)、渲染器(renderer)。 ThreeJS的灯光。只有有了灯光，我们的东西才能在场景中显现出来。 ThreeJS的坐标系。 ThreeJS 画一个立方体Hello World. 2、场景 在Threejs中场景只有一种，用THREE.Scene来表示，要构建一个场景也很简单，只要new一个对象就可以了，代码如下: var scene =.
【Three.js】二、three.js中的场景——Scene
MAXLZ的博客
08-29 3333
【Three.js】二、three.js中的场景——Scene
three.js - scene场景属性讲解
qq_42005992的博客
11-19 916
scene对象可以包含所有的物体，摄像机，光源以及其他的一些对象 scene对象还可称为场景图，它不仅仅是一个对象数据，还包含了整个场景图树形结构中的所有节点 每个添加到three.js场景的对象，甚至包括scene场景，都是继承自THREE.Object3D的对象 每个THREE.Object3D对象都有自己的子对象我们可以通过它的子对象来创建一个three.js能够解释和渲染的对象 THREE.Scene的方法和属性 add(object) 向场景中添加对象，使用该方法还可以创建一个..
three.js学习使用Scene对象，在三维空间中创建随机大小的立方体(vue中使用three.js03)
点燃火柴的博客
08-21 2449
Scene对象方法和属性学习的可视化demo一、demo效果总览二、scene对象相关的方法和属性1.给场景中添加物体 Scene.add(object)2.从场景中移除物体 Scene.remove(obj)3.从场景中查找物体 Scene.getChildByName(name)4.遍历场景中的物体 Scene.traverse(function)5.获取场景中的物体 Scene.children6.给场景设置雾化效果 Scene.fog7.统一场景中物体的材质 Scene.overrideMateri
Scene.js 库：CSS创建动画基于时间轴的动画
chili9547的博客
07-02 915
Scene.js 是一个基于 JavaScript 时间轴的动画库，用于创建动画网站，作为一个动画时间轴库，它允许你创建对象的移动和位置的时间顺序。 此外，由于 Scene.js 的语法类似于 CSS 动画，同时还支持 JavaScript 和 CSS 的播放方法，因此使用起来简单又方便。在...
SceneJs的Helloworld
weixin_34186128的博客
06-04 246
2019独角兽企业重金招聘Python工程师标准>>> ...
Threejs创建一个简单场景
流水無情的博客
02-18 1189
创建一个场景（Creating a scene）开始之前创建一个场景渲染场景使立方体动起来结果 开始之前 首先将对three.js来做一个简要的介绍；我们将开始搭建一个场景，其中包含一个正在旋转的立方体。页面下方有一个已经完成的例子，当你遇到麻烦，或者需要帮助的时候，可以看一看。 在开始使用three.js之前，你需要一个地方来显示它。将下列HTML代码保存为你电脑上的一个HTML文件，同时将three.js复制到该HTML文件所在的目录下的js/目录下，然后在你的浏览器中打开这个HTML文件。 <!
Three.js--2.用Three.js 创建你的第一个三维场景
人间清醒
01-30 882
1.了解场景的三大组件 在Three.js 中，要渲染物体到网页中，我们需要3个组件： 场景（scene） 相机（camera） 渲染器（renderer） 有了这3样东西，才能将物体渲染到网页中去。 创建三要素的代码如下： 2.添加辅助的坐标轴和平面 // 创建一个场景，该场景将保存所有的元素，如对象，相机和灯光 var scene = new THREE.Scene(); ...
three.js three.js入门指南-中文基础教程
01-23
在使用three.js之前，你需要了解一些基本概念，比如场景（Scene）、相机（Camera）、渲染器（Renderer）和几何体（Geometry）。你可以通过在文档和教程中学习这些概念。 一旦你理解了基本概念，你就可以尝试创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值