three.js 测试1
关键看一下里面的注释
代码:
<!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的更多相关文章
- js 测试
今天js测试题目: 被基础题目虐暴......惨不忍睹 1. var num = 2; switch(num){ case 1: console.log("1"); case 2: ...
- Gremlins.js – 模拟用户随机操作的 JS 测试库
Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...
- js测试地址
很多时候,想写js测试代码,比如在学习的时候.看书敲代码,每次打开VS还是很麻烦的.特别是需要加载一些库的时候. 此时有个工具可以解决: https://jsfiddle.net/ 也是在别人的博客里 ...
- w3c JS测试
到W3c的js测试里面溜达了一圈: 做错了几道题: 外部脚本必须包含<script>标签吗? 否!! 这里的外部脚本是指xx.js这个文件,在文件中写js代码是不需要包含script标签的 ...
- JS 测试 Prototype
JS 测试 Prototype 测试 JavaScript 框架库 - Prototype 引用 Prototype 如需测试 JavaScript 库,您需要在网页中引用它. 为了引用某个库,请使用 ...
- JS 测试网络速度与网络延迟
一.延迟与网速 通过js加载一张1x1的极小图片,测试出图片加载的所用的时长.如果换一个几百KB的图片,则可心用来计算下载网速 document.write('<input type=" ...
- react.js 测试
<html> <head> <title>hellow</title> <script src="ht ...
- jest js 测试框架-简单方便人性化
1. 安装 yarn global add jest-cli or npm install -g jest-cli 备注:可以安装为依赖不用全局安装 2. 项目代码 a. 项目初始化 yarn ini ...
- js测试密码的强度
测试密码的强度.js //网站也会根据输入密码的字符特点给出相应的提示,如密码过短.强度差.强度中等.强度强等. //这又是怎么实现的呢?看下面代码: <input type="pas ...
- ava js 测试框架基本试用
随着js 越来越强大,日常使用中关于js 的问题也就越突出了,我们需要关注的点也就不能只像以前那样 只编写简单的功能实现,我们同时也需要关注js 的健壮性,测试就是其中一个比较重要的环节,以下 是av ...
随机推荐
- C++:const
const const是C++提供的一个强大的关键字,const的用法非常多,但总的来说,const的作用只有一个:保证被修饰的内容不会被程序所修改. const基本用法 对一个类型的对象使用cons ...
- Guarded Suspension设计模式
Guarded Suspension 设计模式可以保证,当线程在访问某个对象时,发现条件不满足,就挂起等待条件满足时再次访问 public class GuardedSuspensionQueue { ...
- [转帖]从零开始入门 K8s | 手把手带你理解 etcd
从零开始入门 K8s | 手把手带你理解 etcd https://zhuanlan.zhihu.com/p/96721097 导读:etcd 是用于共享配置和服务发现的分布式.一致性的 KV 存储系 ...
- IDEA Rider使用64位IISExpress(3)
将原来的Programe Files(x86)修改为不带x86的即可.
- Python中的函数(高级使用)
一.将函数作为变量去使用 在Python中函数也是一种对象,是一种名为function的对象,所以可以将函数赋值给变量,类似整数.浮点数.列表.元组.字典赋值给变量. 我们编写如下程序: #codin ...
- Python【day 9】函数入门1
1.什么是函数 函数的概念:对功能或者动作的封装 函数的好处:避免重复代码 2.函数的定义 1.函数的定义 def 函数名(形参列表): 函数体(return) 2.函数的调用 函数名(实参列表) 3 ...
- Windows 计算机取证
windows安全账号管理(SAM) Unveilling The Password Encryption Process Under Windows –a Practical Attack 上述这篇 ...
- js的6种继承方式
重新理解js的6种继承方式 注:本文引用于http://www.cnblogs.com/ayqy/p/4471638.html 重点看第三点 组合继承(最常用) 写在前面 一直不喜欢JS的OOP,在学 ...
- Object-C学习之NSSet和NSMutableSet
转自:http://blog.csdn.net/likandmydeer/article/details/7939749 一.简介 集合(set)是一组单值对象,它可以是固定的(NSSet).也可以是 ...
- 算法-memcopy与memmove的区别
memcpy()和 memmove()都是C语言中的库函数,在头文件string.h中,作用是拷贝一定长度的内存的内容,原型如下 void *memcpy(void *dst, const void ...