android实现带纹理的运动轨迹,基于SceneForm实现子弹射击(绘制子弹运行轨迹)...

基于 SceneForm 实现的子弹射击(绘制子弹运行轨迹)

Sceneform 框架很强大,不了解 Sceneform 的时候,觉得要想做 3D 场景需要会 OpenGL,而 OpenGL 的学习曲线很陡;接触到这个框架之后觉得小白也可以很快上手,甚至可以实现第一人称射击的效果

注:自己学习 SceneForm 有一段时间了,不过没有发现模拟重力场的接口,不知道是不是自己漏掉了

模拟射击效果的思路其实很简单

1、加载一个子弹模型

2、规划子弹由近及远的轨迹

3、绘制子弹的运行轨迹

子弹运行轨迹的逻辑代码;代码中涉及的 CleanArFragment 在之前的《ARCore 的 SceneForm 框架在没有 Plane 情况下的绘制 3D 模型》已经给出;另外需要自行提供一个纹理图片,即代码中的 R.drawable.texture。

class MainActivity : AppCompatActivity() {

var arFragment : CleanArFragment? = null

var camera : Camera? = null

var size = Point(); //屏幕尺寸,控制子弹发射的初始位置

var bullet : ModelRenderable? = null

var scene : Scene? = null

val SHOT = 0x1101 //绘制过程轨迹信号

val SHOT_OVER = 0x1102 //清除子弹模型信号

var handler = object : Handler() {

override fun handleMessage(msg : Message)

{

if (msg.what == SHOT) { //绘制移动过程中的轨迹

var currentStatus = msg.obj as CurrentStatus

currentStatus.node.worldPosition = currentStatus.status

} else if (msg.what == SHOT_OVER) { //一次射击完成,清除屏幕的子弹

var node = msg.obj as Node

scene!!.removeChild(node)

}

}

}

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

// 获取屏幕尺寸

val display = windowManager.defaultDisplay

display.getRealSize(size)

arFragment = this.supportFragmentManager.findFragmentById(R.id.arFragment) as CleanArFragment

arFragment!!.arSceneView.planeRenderer.isEnabled = false //禁止 sceneform 框架的平面绘制

scene = arFragment!!.arSceneView.scene

camera = scene!!.camera

initbullet()

shootButton.setOnClickListener(listener)

}

var listener : View.OnClickListener = object : View.OnClickListener{

override fun onClick(v: View?) {

shoot()

}

}

@TargetApi(Build.VERSION_CODES.N)

//初始化子弹模型

private fun initbullet() {

Texture.builder().setSource(this@MainActivity, R.drawable.texture).build()

.thenAccept(

{ texture ->

MaterialFactory.makeOpaqueWithTexture(this@MainActivity, texture)

.thenAccept { material ->

// 设置子弹模型为球体

bullet = ShapeFactory.makeSphere(0.1f, Vector3(0f, 0f, 0f), material) }

}

)

}

private fun shoot() {

//从屏幕发出的射线,对应子弹的运行轨迹

var ray = camera!!.screenPointToRay(size.x / 2f, size.y / 2f);

var node = Node() //子弹节点

node.renderable = bullet //子弹节点加载子弹模型

scene!!.addChild(node)

Thread(object : Runnable{

override fun run() {

//子弹射击过程中的轨迹,子线程处理轨迹事件,主线程改变轨迹位置

for (i in 1 .. 200 ) { //子弹射程 20 m

var stepLen = i;

var currentPoint = ray.getPoint(stepLen * 0.1f)

var msg = handler.obtainMessage()

msg.what = SHOT

msg.obj = CurrentStatus(node, currentPoint)

handler.sendMessage(msg)

}

//子弹超出距离后,从屏幕清除掉

var msg = handler.obtainMessage()

msg.what = SHOT_OVER

msg.obj = node

handler.sendMessage(msg)

}

}).start()

}

// 子线程和主线程穿点的数据类

data class CurrentStatus(var node : Node, var status : Vector3)

}

界面布局

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/arFragment"

android:name="com.hosh.shootapplication.CleanArFragment"/>

android:layout_width="35dp"

android:layout_height="2dp"

android:background="#ff0000"

android:layout_centerInParent="true" />

android:layout_width="2dp"

android:layout_height="35dp"

android:background="#ff0000"

android:layout_centerInParent="true" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/shootButton"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:layout_marginBottom="8dp"

android:text="@string/shoot"

/>

实现效果如下,因为动图的偏差,子弹不是很清晰,子弹由中心的红色十字向远处射击

9bffe3363ad2d79f8cfdbe2f1a066aae.gif

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现线路流动和建筑物纹理流动,需要使用Three.js中的ShaderMaterial和自定义的着色器代码。下面是一个简单的示例代码: HTML: ``` <div id="container"></div> ``` JavaScript: ```javascript // 创建场景和渲染器 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.getElementById('container').appendChild(renderer.domElement); // 添加灯光 var ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); var pointLight = new THREE.PointLight(0xffffff, 0.5); pointLight.position.set(10, 10, 10); scene.add(pointLight); // 创建建筑物和线路材质 var buildingGeometry = new THREE.BoxGeometry(1, 1, 1); var buildingMaterial = new THREE.MeshPhongMaterial({ color: 0xCCCCCC, shininess: 10 }); var lineMaterial = new THREE.LineBasicMaterial({ color: 0x00FF00 }); var time = 0; // 自定义着色器代码 var vertexShader = ` uniform float time; varying vec2 vUv; void main() { vUv = uv; vec3 position = position; position.x += sin(position.z * 10.0 + time) * 0.1; position.y += sin(position.z * 20.0 + time) * 0.1; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `; var fragmentShader = ` uniform float time; uniform sampler2D texture; varying vec2 vUv; void main() { vec2 uv = vUv; uv.x += sin(uv.y * 10.0 + time) * 0.1; uv.y += sin(uv.x * 20.0 + time) * 0.1; gl_FragColor = texture2D(texture, uv); } `; // 创建着色器材质 var shaderMaterial = new THREE.ShaderMaterial({ uniforms: { time: { value: 0 }, texture: { value: new THREE.TextureLoader().load('https://threejs.org/examples/textures/uv_grid_opengl.jpg') } }, vertexShader: vertexShader, fragmentShader: fragmentShader }); // 添加建筑物和线路 for (var i = 0; i < 10; i++) { var building = new THREE.Mesh(buildingGeometry, buildingMaterial); building.position.set(i - 5, 0, 0); scene.add(building); var lineGeometry = new THREE.Geometry(); lineGeometry.vertices.push(new THREE.Vector3(i - 5, -0.5, 0), new THREE.Vector3(i - 5, -0.5, -5)); var line = new THREE.Line(lineGeometry, lineMaterial); scene.add(line); } // 渲染循环 function render() { requestAnimationFrame(render); time += 0.1; shaderMaterial.uniforms.time.value = time; renderer.render(scene, camera); } render(); ``` 这个示例代码中,我们创建了一个包含10个方块和10条线路的场景。我们使用了一个自定义的着色器代码来实现建筑物和线路的流动效果。建筑物使用了Phong材质,线路使用了LineBasicMaterial。 在自定义的着色器代码中,我们使用了一个uniform变量time来控制时间流逝。在顶点着色器中,我们根据时间调整建筑物的位置。在片元着色器中,我们根据时间调整纹理的UV坐标来实现纹理的流动效果。 如果你需要进一步了解ShaderMaterial和自定义着色器代码的使用,可以参考Three.js的官方文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值