1,各浏览器对WebGL的支持

手机浏览器对WebGL的支持：

书的源码：https://github.com/josdirksen/learning-threejs

第一次用浏览器打开代码可能无法正常显示，好像要对浏览器做一些设置额。

创建第一个3D场景包括这几样东西：

<!DOCTYPE html>

<html>

<head>

    <title>Example 01.06 - Screen size change</title>

    <script type="text/javascript" src="../libs/three.js"></script>

    <script type="text/javascript" src="../libs/stats.js"></script>//shows the frames per second(fps) for animation

    <script type="text/javascript" src="../libs/dat.gui.js"></script>//allows you to very easily create a simple user interface component that can change variables in your code

    <style>

        body {

            /* set margin to 0 and overflow to hidden, to go fullscreen */

            margin: 0;

            overflow: hidden;

        }

    </style>

</head>

<body>

<div id="Stats-output">

</div>

<!-- Div which will hold the Output -->

<div id="WebGL-output">

</div>

<!-- Javascript code that runs our Three.js examples -->

<script type="text/javascript">

    var camera;

    var scene;

    var renderer;

    // once everything is loaded, we run our Three.js stuff.

    function init() {

　　　　

        var stats = initStats();

        // create a scene, that will hold all our elements such as objects, cameras and lights.

        scene = new THREE.Scene();

        // create a camera, which defines where we're looking at. 第一个参数是摄像机的角度，其他因素不变的情况下角度越大，看到的场景越小，第二个是场景的比例，第三个是near，第四个是far我们能看到的是near和far之间的内容

        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size

        renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));

        renderer.setSize(window.innerWidth, window.innerHeight);

        renderer.shadowMapEnabled = true;//默认是不开启阴影效果的，如果要显示阴影在这里要把它设为true;

        // create the ground plane

        var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);//创建一个长为60，宽为20的长方形，后面那两个参数是可选的，分别为widthsegements,heightsegements

        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});//设置材质，并初始化材质颜色

        var plane = new THREE.Mesh(planeGeometry, planeMaterial); //把二者合并为一个mesh对象

        plane.receiveShadow = true;//接收阴影

        // rotate and position the plane

        plane.rotation.x = -0.5 * Math.PI;

        plane.position.x = 15;

        plane.position.y = 0;

        plane.position.z = 0;

        // add the plane to the scene

        scene.add(plane);

        // create a cube

        var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);//新建一个立方体，参数为width,height,depth,后面还有三个可选参数，分别为widthsegments,heightsegments,depthsegments

        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});

        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

        cube.castShadow = true;

        // position the cube

        cube.position.x = -4;

        cube.position.y = 3;

        cube.position.z = 0;

        // add the cube to the scene

        scene.add(cube);

        var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);//SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});

        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

        // position the sphere

        sphere.position.x = 20;

        sphere.position.y = 0;

        sphere.position.z = 2;

        sphere.castShadow = true;

        // add the sphere to the scene

        scene.add(sphere);

        // position and point the camera to the center of the scene

        camera.position.x = -30;

        camera.position.y = 40;

        camera.position.z = 30;

        camera.lookAt(scene.position);

        // add subtle ambient lighting

        var ambientLight = new THREE.AmbientLight(0x0c0c0c);

        scene.add(ambientLight);

        // add spotlight for the shadows

        var spotLight = new THREE.SpotLight(0xffffff);

        spotLight.position.set(-40, 60, -10);

        spotLight.castShadow = true;

        scene.add(spotLight);

        // add the output of the renderer to the html element

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

        // call the render function

        var step = 0;

        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);

        render();

        function render() {

            stats.update();

            // rotate the cube around its axes

            cube.rotation.x += controls.rotationSpeed;

            cube.rotation.y += controls.rotationSpeed;

            cube.rotation.z += controls.rotationSpeed;

            // bounce the sphere up and down

            step += controls.bouncingSpeed;

            sphere.position.x = 20 + ( 10 * (Math.cos(step)));

            sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));

            // render using requestAnimationFrame

            requestAnimationFrame(render);

            renderer.render(scene, camera);

        }

        function initStats() {

            var stats = new Stats();

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

            // Align top-left

            stats.domElement.style.position = 'absolute';

            stats.domElement.style.left = '0px';

            stats.domElement.style.top = '0px';

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

            return stats;

        }

    }

    function onResize() {

        camera.aspect = window.innerWidth / window.innerHeight;

        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);

    }

    window.onload = init;

    // listen to the resize events

    window.addEventListener('resize', onResize, false);

</script>

</body>

</html>

Chapter 1:Create You First 3D Scene With Three.js的更多相关文章

  1. WPF: Creation of Text Labels for 3D Scene

    原文:WPF: Creation of Text Labels for 3D Scene 转载:http://www.codeproject.com/KB/WPF/WPF_Text3D.aspx Do ...

  2. 泡泡一分钟：Project AutoVision - Localization and 3D Scene Perception for an Autonomous Vehicle with a Multi-Camera System

    Project AutoVision - Localization and 3D Scene Perception for an Autonomous Vehicle with a Multi-Cam ...

  3. 网页3D效果库Three.js初窥

    网页3D效果库Three.js初窥 背景 一直想研究下web页面的3D效果,最后选择了一个比较的成熟的框架Three.js下手 ThreeJs官网 ThreeJs-github; 接下来我会陆续翻译 ...

  4. 网页3D效果库Three.js学习[二]-了解照相机

    camera 上篇大致了解了three.js ,并可以创建一个简单的可动的立方体.下来我们着重了解下camera (照相机),照相机其实就是视角,就像你的眼睛.Three.js有两种不同的相机模式:直 ...

  5. [Tools] Create a Simple CLI Tool in Node.js with CAC

    Command-line tools can help you with all sorts of tasks. This lesson covers the very basics of setti ...

  6. javascript 3d网页 示例 ( three.js 初探 七)

    1 完整代码下载 https://pan.baidu.com/s/1JJyVcP2KqXsd5G6eaYpgHQ 提取码 3fzt (压缩包名: 2020-4-5-demo.zip) 2 图片展示 3 ...

  7. 3D视觉差---原生js+css

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 3d标签云（JS版）

    http://www.miaov.com/miaov_demo/3dLable/miaov_demo.html http://www.lijian.net/p/windstagball/index.h ...

  9. [Most.js] Create Streams From Single Values With Most.js

    Most provides many means for creating streams, the simplest of which is the offunction. In this less ...

随机推荐

  1. windows下如何查看所有端口及占用

    1.在windows下查看所有端口: 先点击电脑左下角的开始,然后选择运行选项,接着我们在弹出的窗口中,输入[cmd]命令,进行命令提示符. 然后我们在窗口中输入[netstat -ano]按下回车, ...

  2. VmWare装Linux&Centos步骤

    昨晚一次偶然的机会进入飞哥的直播间,他正在将用虚拟机搭建Linux环境的步骤,自己之前也确实安装过一次,不过没什么系统性总结,过程中有些步骤还需百度查找.于是乎今天决定从零基础在过一遍流程,便是这篇博 ...

  3. 小白自制Linux开发板 三. Linux内核与文件系统移植

    上一篇完成了uboot的移植,但是想要愉快的在开发板上玩耍还需要移植Linux内核和文件系统. 1.Linux内核 事实上对于F1C100S/F1C200S,Linux官方源码已经对licheepi ...

  4. IIS部署WCF详细教程

    前言: 前段时间接手了公司一个十几年前的老项目,该项目对外提供的服务使用的是WCF进行通信的.因为需要其他项目需要频繁的使用该WCF服务,所以我决定把这个WCF部署到IIS中避免每次调试运行查看效果. ...

  5. 分布式锁Redission

    Redisson 作为分布式锁 官方文档:https://github.com/redisson/redisson/wiki 引入依赖 <dependency> <groupId&g ...

  6. 20 行代码：Serverless 架构下用 Python 轻松搞定图像分类和预测

    作者 | 江昱 前言 图像分类是人工智能领域的一个热门话题.通俗解释就是,根据各自在图像信息中所反映的不同特征,把不同类别的目标区分开来的图像处理方法. 它利用计算机对图像进行定量分析,把图像或图像中 ...

  7. 洛谷3769[CH弱省胡策R2]TATT (KDTree)(四维LIS)

    真是一个自闭的题目(调了一个上午+大半个下午) 从\(WA\)到\(WA+TLE\)到\(TLE\)到\(AC\) 真的艰辛. 首先,这个题,我们可以考虑直接上四维KDTree来解决. 对于kdtre ...

  8. 2020.12.3--vj个人赛补题

    A Vasya studies music.He has learned lots of interesting stuff. For example, he knows that there are ...

  9. 【Python123】练习1: Python基本语法元素 (第1周)

    实例1: 温度转换 这是"实例"题,与课上讲解实例相同,请作答检验学习效果.‪‬‪‬‪‬‪‬‪‬‮‬‫‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‭‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‭‬‪‬‪‬‪‬ ...

  10. [敏捷软工团队博客]Beta阶段测试报告

    项目 内容 2020春季计算机学院软件工程(罗杰 任健) 博客园班级博客 作业要求 Beta阶段测试报告 我们在这个课程的目标是 在团队合作中锻炼自己 这个作业在哪个具体方面帮助我们实现目标 对Bet ...