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. TI AM335x ARM Cortex-A8工业级核心板，工业网关、工业HMI等用户首选

    创龙科技近期推出了ti AM335x ARM Cortex-A8工业级核心板,它拥有高性能.低功耗.低成本.接口丰富等优势,成为了工业网关.工业HMI等用户的首要选择.另外,核心板采用邮票孔连接方式, ...

  2. P7323-[WC2021]括号路径【并查集,启发式合并】

    正题 题目链接:https://www.luogu.com.cn/problem/P7323 题目大意 给出\(n\)个点的一张有向图.每个边\((u,v,w)\)表示\(u->v\)有一个类型 ...

  3. P3793-由乃救爷爷【分块,ST表】

    正题 题目链接:https://www.luogu.com.cn/problem/P3793 题目大意 给出\(n\)个数字的一个序列\(m\)次询问区间最大值 保证数据随机 \(1\leq n,m\ ...

  4. 前端规范之JS代码规范（ESLint + Prettier）

    代码规范是软件开发领域经久不衰的话题,几乎所有工程师在开发过程中都会遇到或思考过这一问题.而随着前端应用的大型化和复杂化,越来越多的前端团队也开始重视代码规范.同样,前段时间,笔者所在的团队也开展了一 ...

  5. 深度学习--GAN学习笔记

    生成模型 WGAN Blog GAN 推荐学习网站 生成模型 什么是生成模型? GMM: 用来做聚类,(非监督学习) NB(朴素贝叶斯):(监督学习,可以用来做垃圾邮件分类) Logistics 回归 ...

  6. Java MD5和SHA256等常用加密算法

    前言 我们在做java项目开发的时候,在前后端接口分离模式下,接口信息需要加密处理,做签名认证,还有在用户登录信息密码等也都需要数据加密.信息加密是现在几乎所有项目都需要用到的技术,身份认证.单点登陆 ...

  7. Ubuntu 20.04上安装MySQL教程，ubuntu安装mysql

    在Ubuntu 20.04上安装MySQL教程 先决条件 确保您以具有sudo特权的用户身份登录. 在Ubuntu上安装MySQL 在撰写本文时,Ubuntu存储库中可用的MySQL的最新版本是MyS ...

  8. VirtualBox上安装Debian10个人备忘笔记

    准备 VirtualBox 下载链接:Downloads – Oracle VM VirtualBox,下载完成后安装即可. Debian 下载链接:通过 HTTP/FTP 下载 Debian CD/ ...

  9. Python简单爬取图书信息及入库

    课堂上老师布置了一个作业,如下图所示: 就是简单写一个借书系统. 大概想了一下流程,登录-->验证登录信息-->登录成功跳转借书界面-->可查看自己的借阅书籍以及数量... 登录可以 ...

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

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