js也能写3D游戏?
2023-06-13 09:11:46 时间
大家好,又见面了,我是你们的朋友全栈君。
看完这本书《3D Game Programing for Kids》之后,发现3D游戏的学习,也可以使用javascript来写的。
先要上这个网站https://threejs.org,然后下载它的three.js源码放到一个目录,比如js。
然后放入这段代码:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>
保存之后,再使用CHROME浏览器打开,就可以看到下面的画面:
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/141384.html原文链接:https://javaforall.cn
相关文章
- js书写原生ajax,JS 原生ajax写法
- js面试题及答案2020_JS面试题大全
- JS跳转代码_js中跳转页面路径
- 用JS获取地址栏url参数的方法_js的url是啥
- 【说站】js自定义事件的实现
- Js排序算法_js 排序算法
- JS面试题-js新增基本数据类型BigInt
- js中四舍五入的方法_JS取整
- JS防抖与节流(类比游戏技能)
- JS+CSS自定义右键菜单美化
- 3. 「vue@2.6.11 源码分析」vue.js 首次执行做了哪些事情
- get两个js小技能——JS截取视频第一帧&图片转Base64
- 前端 CST和GMT+0800时间转换(js/vue/react/jsp通用)
- 纯前端仿GPT流式打字效果的js库,类似通义千问或者其他AI界面的打字效果
- JS判断字符串长度的5个方法详解编程语言
- JS获取元素的偏移位置
- Linux上的JS压缩工具(js压缩工具linux)
- 通过js脚本复制网页上的一个表格的不错实现方法
- 用js实现的打字效果的带链接的新闻标题
- js模拟实现Array的sort方法
- js延迟加载改变JS的位置加快网页加载速度
- JS中的prototype与面向对象的实例讲解
- 异步动态加载js与css文件的js代码
- 不提示直接关闭网页窗口的JS示例代码
- 让html页面不缓存js的实现方法
- ThinkPHP模版中导入CSS和JS文件的方法
- js实现遮罩层弹出框的方法