关键看一下里面的注释

代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body>

    <script src="three.js"></script>

    <script type="text/javascript">

        //基础知识恶补

        //场景（THREE.Scene）：

        //  是所有不同对象的容器，也就是说该对象保存所有物体、光源、摄像机以及渲染所需的其他对象

        //材质：   原文：https://www.cnblogs.com/amy2011/p/6148736.html

        //  材质就像物体的皮肤，决定了几何体的外表，例如是否像草地/金属，是否透明，是否显示线框等

        //  Three.js提供了一个材质基类THREE.Material，该基类拥有three.js所有材质的公有属性

        //  材质的公共属性分类：

        //      基础属性：ID，name，透明度，是否可见，是否需要刷新等

        //      融合属性：决定了物体如何与背景融合

        //      高级属性：可以控制WEBGL上下文渲染物体的方法，大多数情况下，是不会用这些属性，我们这里不再讨论

        var camera, scene, renderer;

        var geometry, material, mesh;

        init();

        animate();

        function init() {

            //创建相机

            camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);

            camera.position.z = 1;

            //创建场景

            scene = new THREE.Scene();

            //创建几何体 - 立方体

            geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);//参数：长宽高

            //创建材质

            material = new THREE.MeshNormalMaterial();

            //material.visible = false;//是否可见

            material.transparent = true;//是否透明

            material.opacity = 0.9;//透明度

            //创建网格，几何体是不能被渲染的，只有几何体和材质 结合成网格 才能被渲染到屏幕上

            mesh = new THREE.Mesh(geometry, material);

            //添加到场景

            scene.add(mesh);

            renderer = new THREE.WebGLRenderer({ antialias: true });

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

            document.body.appendChild(renderer.domElement);

        }

        function animate() {

            requestAnimationFrame(animate);

            mesh.rotation.x += 0.01;

            mesh.rotation.y += 0.02;

            renderer.render(scene, camera);

        }

    </script>

</body>

</html>

效果：

three.js 测试1的更多相关文章

  1. js 测试

    今天js测试题目: 被基础题目虐暴......惨不忍睹 1. var num = 2; switch(num){ case 1: console.log("1"); case 2: ...

  2. Gremlins.js – 模拟用户随机操作的 JS 测试库

    Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...

  3. js测试地址

    很多时候,想写js测试代码,比如在学习的时候.看书敲代码,每次打开VS还是很麻烦的.特别是需要加载一些库的时候. 此时有个工具可以解决: https://jsfiddle.net/ 也是在别人的博客里 ...

  4. w3c JS测试

    到W3c的js测试里面溜达了一圈: 做错了几道题: 外部脚本必须包含<script>标签吗? 否!! 这里的外部脚本是指xx.js这个文件,在文件中写js代码是不需要包含script标签的 ...

  5. JS 测试 Prototype

    JS 测试 Prototype 测试 JavaScript 框架库 - Prototype 引用 Prototype 如需测试 JavaScript 库,您需要在网页中引用它. 为了引用某个库,请使用 ...

  6. JS 测试网络速度与网络延迟

    一.延迟与网速 通过js加载一张1x1的极小图片,测试出图片加载的所用的时长.如果换一个几百KB的图片,则可心用来计算下载网速 document.write('<input type=" ...

  7. react.js 测试

    <html>    <head>        <title>hellow</title>        <script src="ht ...

  8. jest js 测试框架-简单方便人性化

    1. 安装 yarn global add jest-cli or npm install -g jest-cli 备注:可以安装为依赖不用全局安装 2. 项目代码 a. 项目初始化 yarn ini ...

  9. js测试密码的强度

    测试密码的强度.js //网站也会根据输入密码的字符特点给出相应的提示,如密码过短.强度差.强度中等.强度强等. //这又是怎么实现的呢?看下面代码: <input type="pas ...

  10. ava js 测试框架基本试用

    随着js 越来越强大,日常使用中关于js 的问题也就越突出了,我们需要关注的点也就不能只像以前那样 只编写简单的功能实现,我们同时也需要关注js 的健壮性,测试就是其中一个比较重要的环节,以下 是av ...

随机推荐

  1. Navicat 连接远程数据库报错：1130 - Host "XX.XX.XX.XX" is not allowed to connect to this MySQL server

    Navicat 连接远程数据库报错:1130 - Host "XX.XX.XX.XX" is not allowed to connect to this MySQL server ...

  2. go-gin-api 路由中间件 - 日志记录

    概述 首先同步下项目概况: 上篇文章分享了,规划项目目录和参数验证,其中参数验证使用的是 validator.v8 版本,现已更新到 validator.v9 版本,最新代码查看 github 即可. ...

  3. 纯 css 打造一个小提示 tooltip

    最后编辑:2019/11/26 前 无意间在寻找资料时候,发现一个不错的小提示,查看源码竟然是纯手工 css 编写(文章底部参考链接). 效果 使用的特性 css2 中的 attr 函数,所以现在(2 ...

  4. win10 配置IIS

    互联网信息服务(英語:Internet Information Services),在台湾被称为网际网路资讯服务,是由微软公司提供的基于运行Microsoft Windows的互联网基本服务.最初是W ...

  5. 一个简单的 ValueTask 的示例

    Task 确实有潜在的缺点,特别是对于实例创建很多  并且高吞吐量和性能是关键问题的场景  :  Task 是一个类.作为一个类,这意味着任何需要创建一个对象的操作都需要分配一个对象,分配的对象越多, ...

  6. 第一次有人把 5G 讲的这么简单明了

    一个简单且神奇的公式    今天的故事,从一个公式开始讲起.这是一个既简单又神奇的公式.说它简单,是因为它一共只有 3 个字母.而说它神奇,是因为这个公式蕴含了博大精深的通信技术奥秘,这个星球上有无数 ...

  7. python 练习题：将列表中的大写字母转换成小写

    将列表中的大写字母转换成小写如果list中既包含字符串,又包含整数,由于非字符串类型没有lower()方法,L1 = ['Hello', 'World', 18, 'Apple', None]请修改列 ...

  8. vue+element 根据内容计算单元格的宽度

    需求是这样的,之前我也写过,就是前端渲染的表格数据是动态渲染表格的行和列, 那么就必然出现了一个问题,当列超过一定的个数的时候,会出现横向滚动条, 那么怎么让表格整体看起来自然协调一些呢,老大要求表格 ...

  9. VUE+ElementUI 搭建后台项目（一）

    前言 之前有些过移动端的项目搭建的文章,感觉不写个pc端管理系统老感觉少了点什么,最近公司项目比较多,恰巧要做一个申报系统的后台管理系统,鉴于对vue技术栈比较熟悉,所以考虑还是使用vue技术栈来做: ...

  10. Spark实现分组TopN

    一.概述 在许多数据中,都存在类别的数据,在一些功能中需要根据类别分别获取前几或后几的数据,用于数据可视化或异常数据预警.在这种情况下,实现分组TopN就显得非常重要了,因此,使用了Spark聚合函数 ...