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. Visaul Studio Code中提示 vue：无法加载vue.ps1，未对vue.ps1进行数字签名

    Visaul Studio Code错误提示 错误如图: 解决办法 首先以管理员身份打开windows PowShell终端. 输入下面命令,如提示选择Y即可. get-help set-execut ...

  2. MyBatis封装对象内的List出现的问题

    本篇文章问题1:wife的复数形式是wives,不是wifes,英语不好请见谅. 对象举例: class User { private String username; private List< ...

  3. C++ 多线程按顺序执行函数

    我们提供了一个类: public class Foo { public void first() { print("first"); } public void second() ...

  4. python os.walk处理树状目录结构的文件

    在项目工作中,时常需要用到处理文件的方法,尤其是在windows环境下的树状目录结构 os.walk恰好能完美的处理这种树状目录结构文件,能高效地帮助我们得到我们需要处理的文件 目录结构: Deskt ...

  5. HttpClient使用GET方式通过代理服务器读取页面的例子

    import java.io.BufferedReader;import java.io.InputStreamReader;import org.apache.http.HttpEntity;imp ...

  6. Scrum Meeting 0607

    零.说明 日期:2021-6-7 任务:简要汇报两日内已完成任务,计划后两日完成任务 一.进度情况 组员 负责 两日内已完成的任务 后两日计划完成的任务 困难 qsy PM&前端 重新设计产品 ...

  7. 手把手教你学Dapr - 2. 必须知道的概念

    Sidecar 边车 Dapr API提供Http和gRPC两种通讯方式. 运行方式则可以是容器也可以是进程(Windows开发推荐使用Self Hosted,后续会解释). 这样的好处是与运行环境无 ...

  8. 简明教程 | Docker篇 · 其二：Dockerfile的编写

    Dockerfile是什么 一个包含用于组合 image 的命令的文本文件,docker 通过 dockerfile 和构建环境的上下文来构建 image . 编写Dockerfile FROM 首先 ...

  9. Noip模拟22 2021.7.21

    T1 d 简化题意就是找到相对平均长宽的偏移量较大的矩形给他删掉 可以说是个贪心,按照a,b分别为第一关键字排序 然后假装删去要求的那么多个按a排序的较小的,然后再去b中, 找到 删去的a中的那几个矩 ...

  10. TVS管相关知识

    在设计中,使用到了TVS管,在之前的设计中没有特别关注TVS管.今天查了一些资料,算是简单的有个了解. TVS管是一种保护器件.它的英文全称为 transient voltage suppressor ...